@opexa/portal-components 0.1.16 → 0.1.18

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

@@ -0,0 +1,10 @@
+export declare const SIGN_IN_LOADER_PHASE_LABEL = "Signing you in";
+export interface LoaderProgress {
+    barPct: number;
+    pctShown: number;
+    phaseLabel: string;
+}
+/** Drives loader bar while `active` is true. */
+export declare function useLoaderProgress(active: boolean, phaseLabel: string): LoaderProgress;
+/** Drives loader bar while a sign-in mutation is active. */
+export declare function useSignInLoaderProgress(active: boolean): LoaderProgress;

package/dist/client/hooks/signInLoaderProgress.js

@@ -0,0 +1,40 @@
+'use client';
+import { useEffect, useState } from 'react';
+export const SIGN_IN_LOADER_PHASE_LABEL = 'Signing you in';
+const PROGRESS_INTERVAL_MS = 240;
+const INITIAL_BAR_PCT = 6;
+const BAR_CAP = 97;
+function clamp(n, min, max) {
+    return Math.min(max, Math.max(min, n));
+}
+function advanceBar(p) {
+    const cap = BAR_CAP;
+    if (p >= cap)
+        return p;
+    const delta = (cap - p) * 0.055 + 0.45;
+    return clamp(p + delta, 0, cap);
+}
+/** Drives loader bar while `active` is true. */
+export function useLoaderProgress(active, phaseLabel) {
+    const [barPct, setBarPct] = useState(INITIAL_BAR_PCT);
+    useEffect(() => {
+        if (!active) {
+            setBarPct(INITIAL_BAR_PCT);
+            return;
+        }
+        setBarPct(INITIAL_BAR_PCT);
+        const progressId = setInterval(() => {
+            setBarPct((p) => advanceBar(p));
+        }, PROGRESS_INTERVAL_MS);
+        return () => clearInterval(progressId);
+    }, [active]);
+    return {
+        barPct,
+        pctShown: Math.min(99, Math.round(barPct)),
+        phaseLabel,
+    };
+}
+/** Drives loader bar while a sign-in mutation is active. */
+export function useSignInLoaderProgress(active) {
+    return useLoaderProgress(active, SIGN_IN_LOADER_PHASE_LABEL);
+}

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/dist/components/Migrate/Migrate.d.ts

@@ -0,0 +1,10 @@
+import type { ImageProps } from 'next/image';
+export interface MigrateProps {
+    /** Controls loader dialog visibility and progress animation. */
+    open: boolean;
+    /** Shown inside the loading spinner; omit for default user icon. */
+    logo?: ImageProps['src'];
+    /** Extra classes merged onto the inner card. */
+    cardClassName?: string;
+}
+export declare function Migrate(props: MigrateProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Migrate/Migrate.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MigrateLoadingDialog } from './MigrateLoadingDialog.js';
+export function Migrate(props) {
+    return (_jsx(MigrateLoadingDialog, { open: props.open, active: props.open, logo: props.logo, variant: "migrate", cardClassName: props.cardClassName }));
+}

package/dist/components/Migrate/MigrateInitializing.d.ts

@@ -0,0 +1,17 @@
+import { type ImageProps } from 'next/image';
+export declare const LOADER_HEADLINE = "Please wait while we finish setting things up for your account.";
+export declare const LOADER_FOOTER = "You'll be redirected automatically once everything is ready.";
+export declare const MIGRATE_LOADER_PHASE_LABEL = "Setting things up";
+export declare const MIGRATE_LOADER_TITLE = "Account migration";
+export declare const SIGN_IN_LOADER_TITLE = "Signing in";
+export interface MigrateInitializingProps {
+    title: string;
+    phaseLabel: string;
+    barPct: number;
+    pctShown: number;
+    /** Brand mark in the spinner; omit to show the default user icon. */
+    logo?: ImageProps['src'];
+    footerText?: string;
+    className?: string;
+}
+export declare function MigrateInitializing(props: MigrateInitializingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Migrate/MigrateInitializing.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image, {} from 'next/image';
+import { User01Icon } from '../../icons/User01Icon.js';
+import { mergeMigrateCardClassName } from './migrateCard.js';
+export const LOADER_HEADLINE = 'Please wait while we finish setting things up for your account.';
+export const LOADER_FOOTER = "You'll be redirected automatically once everything is ready.";
+export const MIGRATE_LOADER_PHASE_LABEL = 'Setting things up';
+export const MIGRATE_LOADER_TITLE = 'Account migration';
+export const SIGN_IN_LOADER_TITLE = 'Signing in';
+export function MigrateInitializing(props) {
+    const footerText = props.footerText ?? LOADER_FOOTER;
+    return (_jsx("div", { className: mergeMigrateCardClassName(props.className), children: _jsxs("div", { className: "flex flex-col items-stretch gap-5 px-0.5 py-1 sm:px-1", children: [_jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "relative h-20 w-20 shrink-0", "aria-hidden": true, children: [_jsx("div", { className: "absolute inset-0 animate-spin rounded-full border-4 border-bg-tertiary border-t-button-tertiary-fg [animation-duration:1s]" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center text-button-tertiary-fg", children: props.logo ? (_jsx(Image, { src: props.logo, alt: "", width: 20, height: 20, className: "h-12 w-12 object-contain" })) : (_jsx(User01Icon, { className: "h-7 w-7", "aria-hidden": true })) })] }) }), _jsxs("div", { className: "flex w-full min-w-0 flex-col gap-1.5", children: [_jsx("h1", { className: "font-semibold text-text-primary-900 text-lg tracking-tight", children: props.title }), _jsx("p", { className: "min-w-0 max-w-full text-balance text-center text-sm text-text-secondary-700 leading-relaxed", children: LOADER_HEADLINE })] }), _jsxs("div", { className: "w-full min-w-0 space-y-1.5", children: [_jsxs("div", { className: "flex w-full min-w-0 items-center justify-between gap-3 text-text-tertiary-600 text-xs", children: [_jsx("span", { className: "min-w-0 truncate text-left", children: props.phaseLabel }), _jsxs("span", { className: "shrink-0 text-text-tertiary-600/90 tabular-nums", children: [props.pctShown, "%"] })] }), _jsx("div", { className: "h-2 w-full min-w-0 overflow-hidden rounded-full bg-bg-tertiary", children: _jsx("div", { className: "h-full rounded-full bg-button-primary-bg transition-[width] duration-1000 ease-[cubic-bezier(0.33,1,0.68,1)]", style: { width: `${props.barPct}%` } }) })] }), _jsx("p", { className: "min-w-0 max-w-full text-balance text-center text-text-tertiary-600/80 text-xs leading-relaxed", children: footerText })] }) }));
+}

package/dist/components/Migrate/MigrateLoadingDialog.d.ts

@@ -0,0 +1,18 @@
+import type { ImageProps } from 'next/image';
+export interface MigrateLoadingDialogProps {
+    /**
+     * When true, renders only `Dialog.Content` (for use inside an existing
+     * `Dialog.Root`, e.g. SignIn).
+     */
+    contentOnly?: boolean;
+    /** Controls dialog visibility when not `contentOnly`. */
+    open?: boolean;
+    /** Drives progress bar animation. */
+    active: boolean;
+    logo?: ImageProps['src'];
+    variant?: 'signIn' | 'migrate';
+    cardClassName?: string;
+    contentClassName?: string;
+}
+/** Loading dialog with spinner, static copy, and mutation-driven progress. */
+export declare function MigrateLoadingDialog(props: MigrateLoadingDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Migrate/MigrateLoadingDialog.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { useLoaderProgress, useSignInLoaderProgress, } from '../../client/hooks/signInLoaderProgress.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { MIGRATE_LOADER_PHASE_LABEL, MIGRATE_LOADER_TITLE, MigrateInitializing, SIGN_IN_LOADER_TITLE, } from './MigrateInitializing.js';
+function useVariantLoaderProgress(active, variant) {
+    const signInProgress = useSignInLoaderProgress(variant === 'signIn' ? active : false);
+    const migrateProgress = useLoaderProgress(variant === 'migrate' ? active : false, MIGRATE_LOADER_PHASE_LABEL);
+    return variant === 'signIn' ? signInProgress : migrateProgress;
+}
+function LoaderCard(props) {
+    const variant = props.variant ?? 'signIn';
+    const progress = useVariantLoaderProgress(props.active, variant);
+    const title = variant === 'signIn' ? SIGN_IN_LOADER_TITLE : MIGRATE_LOADER_TITLE;
+    return (_jsx(MigrateInitializing, { title: title, phaseLabel: progress.phaseLabel, barPct: progress.barPct, pctShown: progress.pctShown, logo: props.logo, className: props.cardClassName }));
+}
+/** Loading dialog with spinner, static copy, and mutation-driven progress. */
+export function MigrateLoadingDialog(props) {
+    const content = (_jsx(Dialog.Content, { className: twMerge('relative mx-auto bg-transparent shadow-none lg:rounded-xl', props.contentClassName), children: _jsx(LoaderCard, { ...props }) }));
+    if (props.contentOnly) {
+        return content;
+    }
+    return (_jsx(Dialog.Root, { open: props.open, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: content })] }) }));
+}

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

@@ -0,0 +1,4 @@
+export * from './Migrate';
+export * from './MigrateInitializing';
+export * from './MigrateLoadingDialog';
+export * from './migrateCard';

package/dist/components/Migrate/index.js

@@ -0,0 +1,4 @@
+export * from './Migrate.js';
+export * from './MigrateInitializing.js';
+export * from './MigrateLoadingDialog.js';
+export * from './migrateCard.js';

package/dist/components/Migrate/migrateCard.d.ts

@@ -0,0 +1,7 @@
+/** Shared shell for MigrateInitializing / MigrateLoadingDialog. */
+export declare const migrateCardClassName = "box-border w-full min-w-0 max-w-full self-stretch rounded-2xl border border-border-primary bg-bg-primary-alt p-5 text-center shadow-black/20 shadow-lg sm:p-6 md:w-[30dvw] md:max-w-[30dvw] md:shrink-0 md:self-center";
+/**
+ * Merges the default migrate card shell with optional classes (e.g. `Migrate`’s
+ * `cardClassName` or a subcomponent’s `className`).
+ */
+export declare function mergeMigrateCardClassName(className?: string): string;

package/dist/components/Migrate/migrateCard.js

@@ -0,0 +1,10 @@
+import { twMerge } from 'tailwind-merge';
+/** Shared shell for MigrateInitializing / MigrateLoadingDialog. */
+export const migrateCardClassName = 'box-border w-full min-w-0 max-w-full self-stretch rounded-2xl border border-border-primary bg-bg-primary-alt p-5 text-center shadow-black/20 shadow-lg sm:p-6 md:w-[30dvw] md:max-w-[30dvw] md:shrink-0 md:self-center';
+/**
+ * Merges the default migrate card shell with optional classes (e.g. `Migrate`’s
+ * `cardClassName` or a subcomponent’s `className`).
+ */
+export function mergeMigrateCardClassName(className) {
+    return twMerge(migrateCardClassName, className);
+}

package/dist/components/SignIn/SignIn.lazy.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIsMutating } from '@tanstack/react-query';
 import Image, {} from 'next/image';
 import { twMerge } from 'tailwind-merge';
 import { useShallow } from 'zustand/shallow';
@@ -7,6 +8,8 @@ import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import { XIcon } from '../../icons/XIcon.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
+import { MigrateLoadingDialog } from '../Migrate/MigrateLoadingDialog.js';
+import { getSignInMutationKey } from '../../utils/mutationKeys.js';
 import { SignInForm as CWSignInForm } from './CrazyWin/SignInForm.js';
 import { SignInForm as HBSignInForm } from './HappyBingo/SignInForm.js';
 import { SignInPropsProvider, SignInProvider } from './SignInContext.js';
@@ -19,11 +22,15 @@ export function SignIn(props) {
         termsAndConditions: ctx.termsAndConditions,
         responsibleGaming: ctx.responsibleGaming,
     })));
+    const mutating = useIsMutating({ mutationKey: getSignInMutationKey() }) > 0;
+    const showLoader = mutating &&
+        props.versionSession === 'Inplay' &&
+        signIn.type === 'NAME_AND_PASSWORD';
     return (_jsx(SignInPropsProvider, { value: props, children: _jsx(SignInProvider, { value: signIn, children: _jsx(Dialog.Root, { open: signInStore.open, onOpenChange: (details) => {
                     signInStore.setOpen(details.open);
                 }, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: () => {
                     // Reset checkbox state when dialog closes
                     globalStore.termsAndConditions.setAccepted(false);
                     globalStore.responsibleGaming.setAccepted(false);
-                }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: props.variant === 'crazywin' ? (_jsxs(Dialog.Content, { className: twMerge(`relative w-[20.6875rem] bg-transparent`, props.className?.root), children: [_jsxs("div", { children: [_jsx(Dialog.CloseTrigger, { className: "md:-right-5 absolute top-0 right-2 z-10 size-5.5 rounded-md bg-gradient-to-t from-[#FFE5AF] to-[#EAC467] p-0.5", children: _jsx(XIcon, { className: "h-4.5 w-4.5 text-[#6C5200]" }) }), _jsx(Image, { src: "https://assets.opexacms.atalos.io/hdQJS7VHEaDvb3ZtV", alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[8rem] object-contain md:mt-10 md:w-[12rem]", draggable: false })] }), _jsx("div", { className: "rounded-[1.25em] border-white/10 bg-[radial-gradient(103.87%_100%_at_50.15%_0%,_#072b37_20.3%,_#051125_100%)] p-[1.25rem] shadow-[0_4px_14px_6px_rgba(0,0,0,0.6)] backdrop-blur-[25px]", children: _jsx(CWSignInForm, {}) }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-1 text-xs md:mt-10", children: [_jsx("span", { children: "Don't have an account?" }), _jsx("button", { type: "button", className: "font-semibold text-[#FFE595]", children: "Register Here" })] })] })) : props.variant === 'happybingo' ? (_jsxs(Dialog.Content, { className: twMerge('h-full w-full lg:mx-auto lg:grid lg:h-[50rem] lg:w-[55rem] lg:grid-cols-2', props.className?.root), style: { msOverflowStyle: 'none', scrollbarWidth: 'none' }, children: [_jsx("div", { className: "hidden h-full overflow-hidden rounded-l-xl lg:block", children: _jsx(Image, { src: "https://assets.opexacms.atalos.io/hd48QiKmacXs1XWnY", alt: "login banner", width: 1000, height: 1000, className: "h-full w-full", draggable: false }) }), _jsxs("div", { className: "relative flex min-h-full flex-col bg-white p-5 lg:rounded-r-xl lg:p-3xl dark:bg-[#0C111D]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: "https://assets.opexacms.atalos.io/hdKuiVnx6WePuJy6C", alt: "happy bingo logo", width: 433, height: 211, className: "mx-auto mb-xl h-auto w-[7.125rem]", draggable: false }), _jsx(HBSignInForm, {})] })] })) : (_jsxs(Dialog.Content, { className: twMerge('mx-auto h-full w-full items-start overflow-y-auto bg-bg-primary-alt p-3xl pb-4xl lg:h-auto lg:max-h-[80vh] lg:w-[400px] lg:rounded-xl', props.className?.root), style: { msOverflowStyle: 'none', scrollbarWidth: 'none' }, children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-7.5 w-auto", draggable: false }), _jsx("div", { children: _jsx(SignInForm, {}) })] })) })] }) }) }) }));
+                }, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsxs(Dialog.Positioner, { children: [showLoader && (_jsx(MigrateLoadingDialog, { contentOnly: true, active: mutating, logo: props.logo, variant: "signIn" })), _jsx(Dialog.Content, { className: twMerge(showLoader ? 'hidden' : ''), children: props.variant === 'crazywin' ? (_jsxs("div", { className: twMerge(`relative w-[20.6875rem] bg-transparent`, props.className?.root), children: [_jsxs("div", { children: [_jsx(Dialog.CloseTrigger, { className: "md:-right-5 absolute top-0 right-2 z-10 size-5.5 rounded-md bg-gradient-to-t from-[#FFE5AF] to-[#EAC467] p-0.5", children: _jsx(XIcon, { className: "h-4.5 w-4.5 text-[#6C5200]" }) }), _jsx(Image, { src: "https://assets.opexacms.atalos.io/hdQJS7VHEaDvb3ZtV", alt: "", width: 200, height: 100, className: "mx-auto h-auto w-[8rem] object-contain md:mt-10 md:w-[12rem]", draggable: false })] }), _jsx("div", { className: "rounded-[1.25em] border-white/10 bg-[radial-gradient(103.87%_100%_at_50.15%_0%,_#072b37_20.3%,_#051125_100%)] p-[1.25rem] shadow-[0_4px_14px_6px_rgba(0,0,0,0.6)] backdrop-blur-[25px]", children: _jsx(CWSignInForm, {}) }), _jsxs("div", { className: "mt-5 flex items-center justify-center gap-1 text-xs md:mt-10", children: [_jsx("span", { children: "Don't have an account?" }), _jsx("button", { type: "button", className: "font-semibold text-[#FFE595]", children: "Register Here" })] })] })) : props.variant === 'happybingo' ? (_jsxs("div", { className: twMerge('relative h-full w-full lg:mx-auto lg:grid lg:h-[50rem] lg:w-[55rem] lg:grid-cols-2', props.className?.root), style: { msOverflowStyle: 'none', scrollbarWidth: 'none' }, children: [_jsx("div", { className: "hidden h-full overflow-hidden rounded-l-xl lg:block", children: _jsx(Image, { src: "https://assets.opexacms.atalos.io/hd48QiKmacXs1XWnY", alt: "login banner", width: 1000, height: 1000, className: "h-full w-full", draggable: false }) }), _jsxs("div", { className: "relative flex min-h-full flex-col bg-white p-5 lg:rounded-r-xl lg:p-3xl dark:bg-[#0C111D]", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: "https://assets.opexacms.atalos.io/hdKuiVnx6WePuJy6C", alt: "happy bingo logo", width: 433, height: 211, className: "mx-auto mb-xl h-auto w-[7.125rem]", draggable: false }), _jsx(HBSignInForm, {})] })] })) : (_jsxs("div", { className: twMerge('relative mx-auto h-full w-full items-start overflow-y-auto bg-bg-primary-alt p-3xl pb-4xl lg:h-auto lg:max-h-[80vh] lg:w-[400px] lg:rounded-xl', props.className?.root), style: { msOverflowStyle: 'none', scrollbarWidth: 'none' }, children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Image, { src: props.logo, alt: "", width: 200, height: 100, className: "mx-auto h-7.5 w-auto", draggable: false }), _jsx("div", { children: _jsx(SignInForm, {}) })] })) })] })] }) }) }) }));
 }

package/dist/components/UpdateMobilePhoneNumber/UpdateMobilePhoneNumber.js

@@ -2,7 +2,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from 'next/image';
 import { useShallow } from 'zustand/shallow';
-import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
 import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
 import inplayLogo from '../../images/inplay-logo.png';
 import lightBg from '../../images/light-bg.png';
@@ -14,15 +13,12 @@ import { useAutoOpen, } from './hooks/useAutoOpen.js';
 import { useUpdateMobileFlow } from './hooks/useUpdateMobileFlow.js';
 export function UpdateMobilePhoneNumber({ shouldOnlyShow = 'MobileVerified', } = {}) {
     useAutoOpen(shouldOnlyShow);
-    const featureFlag = useFeatureFlag();
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         updateMobilePhoneNumber: ctx.updateMobilePhoneNumber,
         kyc: ctx.kyc,
     })));
     const { step, step1Form, step2Form, cooldown, formRef, mobileNumberParser, submitStep1, submitStep2, resend, goBackToStep1, } = useUpdateMobileFlow();
-    const isOpen = globalStore.updateMobilePhoneNumber.open &&
-        featureFlag.enabled &&
-        !globalStore.kyc.open;
+    const isOpen = globalStore.updateMobilePhoneNumber.open && !globalStore.kyc.open;
     return (_jsx(Dialog.Root, { open: isOpen, lazyMount: true, unmountOnExit: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { className: "flex items-center", children: _jsxs(Dialog.Content, { className: "flex w-[375px] flex-col items-center space-y-4 rounded-xl bg-[#111827] p-6 text-center", style: {
                             backgroundImage: `url(${lightBg.src})`,
                         }, children: [_jsx(Image, { src: inplayLogo, alt: "inplay logo", width: 82, height: 34, className: "h-auto w-[82px]" }), _jsxs("div", { children: [step === 1 && (_jsx(Step1MobileNumberForm, { step1Form: step1Form, submitStep1: submitStep1 })), step === 2 && (_jsx(Step2VerificationForm, { step1Form: step1Form, step2Form: step2Form, cooldown: cooldown, formRef: formRef, mobileNumberParser: mobileNumberParser, submitStep2: submitStep2, resend: resend, goBackToStep1: goBackToStep1 }))] })] }) })] }) }));

package/package.json

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