@opexa/portal-components 0.1.16 → 0.1.17

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/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.17",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",