@opexa/portal-components 0.0.958 → 0.0.960

package/dist/lib/components/Banner/Banner.test.js

@@ -52,7 +52,7 @@ describe('Banner', () => {
         expect(link2).toHaveAttribute('href', '/link2');
     });
     it('renders plain div for banners without redirectUrl', () => {
-        const { container } = render(_jsx(Banner, { banners: mockBanners }));
+        render(_jsx(Banner, { banners: mockBanners }));
         // The 3rd banner image (index 2) should be present
         const image3 = screen.getByTestId('banner-image-2');
         expect(image3).toBeInTheDocument();

package/dist/lib/components/Disclaimer/Disclaimer.test.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { screen, waitFor, fireEvent } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { createMockGlobalStore, createMockSessionQuery, createMockSignOutMutation, createMockUseDisclaimer, } from '../../../__tests__/utils/mocks.js';
@@ -49,16 +49,19 @@ vi.mock('../../images/responsible-gaming-new.png', () => ({
 }));
 vi.mock('../../ui/Checkbox', () => {
     const React = require('react');
-    const CheckboxContext = React.createContext({ onCheckedChange: (_) => { } });
+    const CheckboxContext = React.createContext({
+        onCheckedChange: (_) => { },
+    });
     return {
         Checkbox: {
             Root: ({ children, onCheckedChange }) => (_jsx(CheckboxContext.Provider, { value: { onCheckedChange }, children: _jsx("div", { children: children }) })),
             Control: ({ children }) => _jsx("div", { children: children }),
-            Label: ({ children }) => _jsx("label", { children: children }),
+            Label: ({ children, htmlFor, ...props }) => (_jsx("label", { htmlFor: htmlFor ?? 'checkbox-input', ...props, children: children })),
             Indicator: ({ children }) => _jsx("div", { children: children }),
             HiddenInput: React.forwardRef((props, ref) => {
                 const { onCheckedChange } = React.useContext(CheckboxContext);
-                return (_jsx("input", { type: "checkbox", "data-testid": "checkbox-input", ref: ref, ...props, onChange: (e) => {
+                const id = props.id ?? 'checkbox-input';
+                return (_jsx("input", { type: "checkbox", "data-testid": "checkbox-input", id: id, ref: ref, ...props, onChange: (e) => {
                         if (onCheckedChange)
                             onCheckedChange({ checked: e.target.checked });
                     } }));
@@ -106,7 +109,6 @@ describe('DisclaimerV1', () => {
         expect(acceptButton).not.toBeDisabled();
     });
     it('checkbox toggles when clicked', async () => {
-        const user = userEvent.setup();
         render(_jsx(DisclaimerV1, { ...defaultProps }));
         const checkbox = screen.getByTestId('checkbox-input');
         fireEvent.click(checkbox);
@@ -164,7 +166,6 @@ describe('DisclaimerV2', () => {
         expect(list.querySelectorAll('li').length).toBeGreaterThan(0);
     });
     it('checkbox controls both termsOfUse and responsibleGaming', async () => {
-        const user = userEvent.setup();
         render(_jsx(DisclaimerV2, { ...defaultProps }));
         const checkbox = screen.getByTestId('checkbox-input');
         fireEvent.click(checkbox);
@@ -228,7 +229,6 @@ describe('DisclaimerV3', () => {
         expect(list.querySelectorAll('li').length).toBeGreaterThan(0);
     });
     it('checkbox controls both termsOfUse and responsibleGaming', async () => {
-        const user = userEvent.setup();
         render(_jsx(DisclaimerV3, { ...defaultProps }));
         const checkbox = screen.getByTestId('checkbox-input');
         fireEvent.click(checkbox);

package/dist/lib/components/Games/Game.js

@@ -89,11 +89,7 @@ function GameImage({ priority }) {
         image: game.image,
     }), [game.reference, game.provider, game.image]);
     const [imgSrc, setImgSrc] = useState(initialImageUrl);
-    return (_jsx(Image, { src: game.name === 'Rainbow Ball' && game.id === '22wQ1YcMwrBaZH3Mx7'
-            ? RainbowballImg
-            : imgSrc, alt: game.name, width: 200, height: 200, loading: priority ? undefined : 'lazy', priority: priority, unoptimized: true, sizes: "(max-width: 768px) 33vw, 200px", className: twMerge('aspect-square w-full rounded-t-md object-contain', game.name === 'Rainbow Ball' &&
-            game.id === '22wQ1YcMwrBaZH3Mx7' &&
-            'object-cover'), onError: () => {
+    return (_jsx(Image, { src: game.name === 'Rainbow Ball' ? RainbowballImg : imgSrc, alt: game.name, width: 200, height: 200, loading: priority ? undefined : 'lazy', priority: priority, unoptimized: true, sizes: "(max-width: 768px) 33vw, 200px", className: twMerge('aspect-square w-full rounded-t-md object-contain', game.name === 'Rainbow Ball' && 'object-cover'), onError: () => {
             const fallbackThumbnail = props.fallbackThumbnails?.[game.provider];
             if (fallbackThumbnail) {
                 setImgSrc(fallbackThumbnail);

package/dist/lib/components/SignIn/MobileNumberSignIn.test.js

@@ -42,10 +42,10 @@ vi.mock('next/navigation', () => ({
 }));
 // Mock external components
 vi.mock('./GoogleSignInTrigger', () => ({
-    GoogleSignInTrigger: () => _jsx("button", { children: "Google Sign In" }),
+    GoogleSignInTrigger: () => _jsx("button", { type: "button", children: "Google Sign In" }),
 }));
 vi.mock('../../FacebookSignInTrigger', () => ({
-    FacebookSignInTrigger: () => _jsx("button", { children: "Facebook Sign In" }),
+    FacebookSignInTrigger: () => _jsx("button", { type: "button", children: "Facebook Sign In" }),
 }));
 vi.mock('../../ui/Checkbox', () => {
     const React = require('react');
@@ -54,11 +54,12 @@ vi.mock('../../ui/Checkbox', () => {
         Checkbox: {
             Root: ({ children, onCheckedChange }) => (_jsx(CheckboxContext.Provider, { value: { onCheckedChange }, children: _jsx("div", { children: children }) })),
             Control: ({ children }) => _jsx("div", { children: children }),
-            Label: ({ children }) => _jsx("label", { children: children }),
+            Label: ({ children, htmlFor, ...props }) => (_jsx("label", { htmlFor: htmlFor ?? 'checkbox-input', ...props, children: children })),
             Indicator: ({ children }) => _jsx("div", { children: children }),
             HiddenInput: React.forwardRef((props, ref) => {
                 const { onCheckedChange } = React.useContext(CheckboxContext);
-                return (_jsx("input", { type: "checkbox", "data-testid": "input-terms", ref: ref, ...props, onChange: (e) => {
+                const id = props.id ?? 'checkbox-input';
+                return (_jsx("input", { type: "checkbox", "data-testid": "input-terms", id: id, ref: ref, ...props, onChange: (e) => {
                         if (onCheckedChange)
                             onCheckedChange({ checked: e.target.checked });
                     } }));
@@ -73,8 +74,8 @@ vi.mock('../../ui/Field', () => {
     return {
         Field: {
             Root: ({ children }) => _jsx("div", { children: children }),
-            Label: ({ children }) => _jsx("label", { children: children }),
-            Input: React.forwardRef((props, ref) => _jsx("input", { "data-testid": `input-${props.name || 'field'}`, ref: ref, ...props })),
+            Label: ({ children, htmlFor, ...props }) => (_jsx("label", { htmlFor: htmlFor ?? props.name ?? 'field', ...props, children: children })),
+            Input: React.forwardRef((props, ref) => (_jsx("input", { "data-testid": `input-${props.name || 'field'}`, id: props.id ?? props.name ?? 'field', ref: ref, ...props }))),
             ErrorText: ({ children }) => _jsx("div", { children: children }),
         },
     };
@@ -84,8 +85,8 @@ vi.mock('../../ui/PinInput', () => {
     return {
         PinInput: {
             Root: ({ children }) => _jsx("div", { children: children }),
-            Label: ({ children }) => _jsx("label", { children: children }),
-            Input: React.forwardRef((props, ref) => _jsx("input", { "data-testid": "input-otp", ref: ref, ...props })),
+            Label: ({ children, htmlFor, ...props }) => (_jsx("label", { htmlFor: htmlFor ?? 'pin-input', ...props, children: children })),
+            Input: React.forwardRef((props, ref) => (_jsx("input", { "data-testid": "input-otp", id: props.id ?? 'pin-input', ref: ref, ...props }))),
             Control: ({ children }) => _jsx("div", { children: children }),
             HiddenInput: () => null,
         },

package/dist/lib/components/SignIn/NameAndPasswordSignIn.test.js

@@ -36,10 +36,10 @@ vi.mock('@ark-ui/react/dialog', () => ({
 }));
 // Mock external components
 vi.mock('./GoogleSignInTrigger', () => ({
-    GoogleSignInTrigger: () => _jsx("button", { children: "Google Sign In" }),
+    GoogleSignInTrigger: () => _jsx("button", { type: "button", children: "Google Sign In" }),
 }));
 vi.mock('./FacebookSignInTrigger', () => ({
-    FacebookSignInTrigger: () => _jsx("button", { children: "Facebook Sign In" }),
+    FacebookSignInTrigger: () => _jsx("button", { type: "button", children: "Facebook Sign In" }),
 }));
 vi.mock('../../ui/Checkbox', () => {
     const React = require('react');
@@ -48,11 +48,12 @@ vi.mock('../../ui/Checkbox', () => {
         Checkbox: {
             Root: ({ children, onCheckedChange }) => (_jsx(CheckboxContext.Provider, { value: { onCheckedChange }, children: _jsx("div", { children: children }) })),
             Control: ({ children }) => _jsx("div", { children: children }),
-            Label: ({ children }) => _jsx("label", { children: children }),
+            Label: ({ children, htmlFor, ...props }) => (_jsx("label", { htmlFor: htmlFor ?? 'checkbox-input', ...props, children: children })),
             Indicator: ({ children }) => _jsx("div", { children: children }),
             HiddenInput: React.forwardRef((props, ref) => {
                 const { onCheckedChange } = React.useContext(CheckboxContext);
-                return (_jsx("input", { type: "checkbox", "data-testid": "input-terms", ref: ref, ...props, onChange: (e) => {
+                const id = props.id ?? 'checkbox-input';
+                return (_jsx("input", { type: "checkbox", "data-testid": "input-terms", id: id, ref: ref, ...props, onChange: (e) => {
                         if (onCheckedChange)
                             onCheckedChange({ checked: e.target.checked });
                     } }));
@@ -69,8 +70,8 @@ vi.mock('../../ui/Field', () => {
     return {
         Field: {
             Root: ({ children }) => _jsx("div", { children: children }),
-            Label: ({ children }) => _jsx("label", { children: children }),
-            Input: React.forwardRef((props, ref) => _jsx("input", { "data-testid": `input-${props.name}`, ref: ref, ...props })),
+            Label: ({ children, htmlFor, ...props }) => (_jsx("label", { htmlFor: htmlFor ?? props.name ?? 'field', ...props, children: children })),
+            Input: React.forwardRef((props, ref) => (_jsx("input", { "data-testid": `input-${props.name}`, id: props.id ?? props.name ?? 'field', ref: ref, ...props }))),
             HelperText: ({ children }) => _jsx("div", { children: children }),
             ErrorText: ({ children }) => _jsx("div", { children: children }),
         },
@@ -79,18 +80,21 @@ vi.mock('../../ui/Field', () => {
 vi.mock('../../ui/PasswordInput', () => {
     const React = require('react');
     const { useState, useContext, createContext } = React;
-    const VisibilityContext = createContext({ visible: false, setVisible: (v) => { } });
+    const VisibilityContext = createContext({
+        visible: false,
+        setVisible: (_v) => { },
+    });
     return {
         PasswordInput: {
             Root: ({ children }) => {
                 const [visible, setVisible] = useState(false);
                 return (_jsx(VisibilityContext.Provider, { value: { visible, setVisible }, children: _jsx("div", { children: children }) }));
             },
-            Label: ({ children }) => _jsx("label", { children: children }),
+            Label: ({ children, htmlFor, ...props }) => (_jsx("label", { htmlFor: htmlFor ?? 'password', ...props, children: children })),
             Input: React.forwardRef((props, ref) => {
                 const { visible } = useContext(VisibilityContext);
                 // Ensure type is passed correctly if not overridden
-                return _jsx("input", { "data-testid": `input-${props.name || 'password'}`, ref: ref, type: visible ? 'text' : 'password', ...props });
+                return (_jsx("input", { "data-testid": `input-${props.name || 'password'}`, id: props.id ?? props.name ?? 'password', ref: ref, type: visible ? 'text' : 'password', ...props }));
             }),
             Control: ({ children }) => _jsx("div", { children: children }),
             VisibilityTrigger: ({ children }) => {
@@ -197,7 +201,7 @@ describe('NameAndPasswordSignIn', () => {
         expect(passwordInput).toHaveAttribute('type', 'password');
     });
     it('handles security question flow', async () => {
-        const user = userEvent.setup();
+        const _user = userEvent.setup();
         // Mock SignInMutation returning a security question challenge
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         mockSignInMutation.data = {

package/dist/lib/components/SignIn/SignIn.test.js

@@ -26,7 +26,10 @@ vi.mock('./HappyBingo/SignInForm', () => ({
 }));
 // Mock Next.js Image since it's used in the wrapper
 vi.mock('next/image', () => ({
-    default: (props) => _jsx("img", { ...props, alt: props.alt || '' }),
+    default: (props) => {
+        // biome-ignore lint/performance/noImgElement: mock Next/Image with plain img in tests
+        return _jsx("img", { ...props, alt: props.alt || '' });
+    },
 }));
 const mockLogo = '/mock-logo.png';
 describe('SignIn Wrapper', () => {
@@ -60,7 +63,6 @@ describe('SignIn Wrapper', () => {
         expect(screen.getByTestId('mock-hb-sign-in-form')).toBeInTheDocument();
     });
     it('closes dialog when close trigger is clicked', async () => {
-        const user = require('@testing-library/user-event').default.setup();
         render(_jsx(SignIn, { ...defaultProps }));
         // Find close button (usually checking for label or class, assuming standard Dialog CloseTrigger)
         // Our Dialog mock or real Dialog implementation needs to be checked.
@@ -74,7 +76,6 @@ describe('SignIn Wrapper', () => {
         </Dialog.CloseTrigger>
         */
         // Ark UI CloseTrigger usually renders a button.
-        const closeButtons = screen.getAllByRole('button');
         // Assuming the first one or finding by icon logic? 
         // Actually, let's just use fireEvent on the overlay or trigger if finding it is hard without testId.
         // But let's try finding by role.

package/dist/lib/components/UpdateMobileNumber/UpdateMobileNumber.d.ts

@@ -1,3 +1 @@
-export declare function UpdateMobileNumber({ onClose }: {
-    onClose?: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function UpdateMobileNumber(): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/UpdateMobileNumber/UpdateMobileNumber.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { zodResolver } from '@hookform/resolvers/zod';
 import Image from 'next/image';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import z from 'zod';
 import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
@@ -20,16 +20,21 @@ import { Dialog } from '../../ui/Dialog/index.js';
 import { Field } from '../../ui/Field/index.js';
 import { PinInput } from '../../ui/PinInput/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-export function UpdateMobileNumber({ onClose }) {
+export function UpdateMobileNumber() {
     const accountQuery = useAccountQuery();
     const account = accountQuery.data;
     const isAccountLoading = accountQuery.isLoading;
     const hasMobileNumber = !!account?.mobileNumber;
-    console.log('isAccountLoading', isAccountLoading);
-    console.log('account', account);
-    console.log('hasMobileNumber', hasMobileNumber);
-    const isDialogOpen = !isAccountLoading && !!account && !hasMobileNumber;
-    console.log('isDialogOpen', isDialogOpen);
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We only want to open the dialog when the account data loads, not on every hasMobileNumber change
+    useEffect(() => {
+        if (!isAccountLoading && !!account && !hasMobileNumber) {
+            setIsDialogOpen(true);
+        }
+        else if (!isAccountLoading && !!account && hasMobileNumber) {
+            setIsDialogOpen(false);
+        }
+    }, [isAccountLoading, account?.mobileNumber]);
     const [step, setStep] = useState(1);
     const sendVerificationCodeMutation = useSendVerificationCodeMutation({
         onSuccess: () => {
@@ -52,7 +57,7 @@ export function UpdateMobileNumber({ onClose }) {
                 title: 'Verification Successful',
                 description: 'Your mobile number has been verified.',
             });
-            onClose?.();
+            setIsDialogOpen(false);
         },
         onError: (err) => {
             const errorMessage = err.message === 'Internal Server Error'

package/package.json

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