@pagamio/frontend-commons-lib 0.8.278 → 0.8.280

package/lib/auth/components/CustomerRegistrationPage.d.ts

@@ -46,6 +46,17 @@ interface PagamioCustomerRegistrationPageProps<T extends CustomAuthConfig> exten
     customRegistrationFields?: Field[];
     /** Custom data mapper function to transform form data before sending it to authService.register */
     mapFormDataToRegistration?: (formData: Record<string, any>) => Record<string, any>;
+    /**
+     * When provided, completely overrides the default authService.register() call.
+     * Useful for custom auth flows (e.g. phone registration).
+     * Should throw on error.
+     */
+    customSubmitHandler?: (formData: Record<string, any>) => Promise<any>;
+    /**
+     * Optional content rendered above the form inside the card.
+     * Useful for tab switchers or banners.
+     */
+    headerContent?: React.ReactNode;
     /** Callback handlers */
     onRegistrationSuccess?: (authResponse?: AuthResponse<T>) => void;
     onRegistrationError?: (error: Error) => void;
@@ -80,6 +91,6 @@ export declare const customerRegistrationPageDefaultText: {
  * Customer Registration Page component
  * @template T - Authentication configuration type
  */
-export declare function PagamioCustomerRegistrationPage<T extends CustomAuthConfig>({ logo, text, customRegistrationFields, mapFormDataToRegistration, appLabel, onRegistrationSuccess, onRegistrationError, onBackToLogin, className, features, sideContentClass, footer, }: Readonly<PagamioCustomerRegistrationPageProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare function PagamioCustomerRegistrationPage<T extends CustomAuthConfig>({ logo, text, customRegistrationFields, mapFormDataToRegistration, customSubmitHandler, headerContent, appLabel, onRegistrationSuccess, onRegistrationError, onBackToLogin, className, features, sideContentClass, footer, }: Readonly<PagamioCustomerRegistrationPageProps<T>>): import("react/jsx-runtime").JSX.Element;
 export default PagamioCustomerRegistrationPage;
 export type { PagamioCustomerRegistrationPageProps };

package/lib/auth/components/CustomerRegistrationPage.js

@@ -46,7 +46,7 @@ export const customerRegistrationPageDefaultText = {
  * Customer Registration Page component
  * @template T - Authentication configuration type
  */
-export function PagamioCustomerRegistrationPage({ logo, text = customerRegistrationPageDefaultText, customRegistrationFields, mapFormDataToRegistration, appLabel, onRegistrationSuccess, onRegistrationError, onBackToLogin, className = '', features, sideContentClass, footer, }) {
+export function PagamioCustomerRegistrationPage({ logo, text = customerRegistrationPageDefaultText, customRegistrationFields, mapFormDataToRegistration, customSubmitHandler, headerContent, appLabel, onRegistrationSuccess, onRegistrationError, onBackToLogin, className = '', features, sideContentClass, footer, }) {
     const { authService, error } = useAuth();
     const { addToast } = useToast();
     const [isLoading, setIsLoading] = useState(false);
@@ -120,6 +120,10 @@ export function PagamioCustomerRegistrationPage({ logo, text = customerRegistrat
         onSuccess: (response) => onRegistrationSuccess?.(response),
         onError: onRegistrationError,
     }, async (data) => {
+        // Custom submit handler takes full precedence
+        if (customSubmitHandler) {
+            return customSubmitHandler(data);
+        }
         // If custom mapper is provided, use it to transform the form data
         const registrationData = mapFormDataToRegistration ? mapFormDataToRegistration(data) : data;
         // For backward compatibility, extract specific fields if no custom mapper is provided
@@ -133,10 +137,9 @@ export function PagamioCustomerRegistrationPage({ logo, text = customerRegistrat
                 phoneNumber: phone ?? '',
             });
         }
-        console.log('Registration data:', registrationData);
         // Use the transformed data directly when custom mapper is provided
         return authService.register(registrationData);
     }, 'Registration successful', 'Registration failed. Please try again.');
-    return (_jsx(AuthPageLayout, { title: text.registerTitle, subtitle: text.registerSubtitle, errorMessage: error?.message, logo: logo, appLabel: appLabel, className: className, horizontal: false, sideContent: features && features.length > 0 ? _jsx(FeatureCarousel, { features: features }) : undefined, sideContentClass: sideContentClass, footer: footer, children: _jsxs("div", { className: "mt-8", children: [_jsx(FormEngine, { fields: customRegistrationFields ?? registrationFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.registerButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef }), onBackToLogin && (_jsxs("div", { className: "mt-6 text-center text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Already have an account? " }), _jsx(Button, { type: "button", variant: "link", onClick: onBackToLogin, className: "font-medium text-primary hover:underline", children: text.backToLoginLabel })] }))] }) }));
+    return (_jsx(AuthPageLayout, { title: text.registerTitle, subtitle: text.registerSubtitle, errorMessage: error?.message, logo: logo, appLabel: appLabel, className: className, horizontal: false, sideContent: features && features.length > 0 ? _jsx(FeatureCarousel, { features: features }) : undefined, sideContentClass: sideContentClass, footer: footer, children: _jsxs("div", { className: "mt-8", children: [headerContent, _jsx(FormEngine, { fields: customRegistrationFields ?? registrationFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.registerButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef }), onBackToLogin && (_jsxs("div", { className: "mt-6 text-center text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Already have an account? " }), _jsx(Button, { type: "button", variant: "link", onClick: onBackToLogin, className: "font-medium text-primary hover:underline", children: text.backToLoginLabel })] }))] }) }));
 }
 export default PagamioCustomerRegistrationPage;

package/lib/auth/components/LoginPage.d.ts

@@ -29,6 +29,22 @@ import type { BaseAuthPageProps } from './AuthFormUtils';
  * Login field type - determines whether the login form uses username or email
  */
 export type LoginFieldType = 'username' | 'email';
+/**
+ * Configuration for the phone OTP login tab.
+ * When provided, a "Phone + OTP" tab is displayed alongside the password tab.
+ */
+export interface PhoneOtpLoginConfig {
+    /** Send OTP to the given phone number. Should throw on error. */
+    sendOtp: (phoneNumber: string) => Promise<any>;
+    /** Verify OTP for the given phone number. Should throw on error. */
+    verifyOtp: (phoneNumber: string, otpCode: string) => Promise<any>;
+    /** Optional countdown seconds before resend is allowed (default: 60) */
+    resendCountdown?: number;
+    /** Optional label for the phone-OTP tab (default: 'Phone + OTP') */
+    tabLabel?: string;
+    /** Optional label for the password tab (default: 'Email & Password') */
+    passwordTabLabel?: string;
+}
 /**
  * Base login credentials interface that can be extended for specific implementations
  */
@@ -100,6 +116,11 @@ interface PagamioLoginPageProps<T extends CustomAuthConfig> extends BaseAuthPage
     sideContentClass?: string;
     /** Footer content */
     footer?: React.ReactNode;
+    /**
+     * When provided, adds a "Phone + OTP" tab alongside the standard login form.
+     * The tab handles the full 2-step phone OTP flow internally.
+     */
+    phoneOtpConfig?: PhoneOtpLoginConfig;
 }
 export interface LoginErrorProps {
     code: string;
@@ -121,6 +142,6 @@ export declare const loginPageDefaultText: {
  * Generic Login Page component
  * @template T - Authentication configuration type
  */
-export declare function PagamioLoginPage<T extends CustomAuthConfig>({ logo, text, appLabel, onForgotPassword, onLoginSuccess, onLoginError, hasCreateAccount, createAccountRoute, onCreateAccount, transformLoginData, authenticatorType, loginFieldType, customLoginFields, className, features, sideContentClass, footer, }: Readonly<PagamioLoginPageProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare function PagamioLoginPage<T extends CustomAuthConfig>({ logo, text, appLabel, onForgotPassword, onLoginSuccess, onLoginError, hasCreateAccount, createAccountRoute, onCreateAccount, transformLoginData, authenticatorType, loginFieldType, customLoginFields, className, features, sideContentClass, footer, phoneOtpConfig, }: Readonly<PagamioLoginPageProps<T>>): import("react/jsx-runtime").JSX.Element;
 export default PagamioLoginPage;
 export type { PagamioLoginCredentials, PagamioLoginPageProps };

package/lib/auth/components/LoginPage.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Generic Login Page component that works with different authentication configurations.
  * Provides a customizable login interface with support for different branding and text options.
@@ -30,6 +30,7 @@ import { useAuth } from '../context';
 import { createFormSubmissionHandler } from './AuthFormUtils';
 import { AuthPageLayout } from './AuthPageLayout';
 import { FeatureCarousel } from './FeatureCarousel';
+import { OtpInput } from './OtpVerification';
 export const loginPageDefaultText = {
     welcomeTitle: 'Welcome Back!',
     welcomeSubtitle: 'Sign in to your account to continue',
@@ -46,12 +47,99 @@ export const loginPageDefaultText = {
  * Generic Login Page component
  * @template T - Authentication configuration type
  */
-export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel, onForgotPassword, onLoginSuccess, onLoginError, hasCreateAccount = false, createAccountRoute, onCreateAccount, transformLoginData, authenticatorType, loginFieldType = 'username', customLoginFields, className = '', features, sideContentClass, footer, }) {
+export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel, onForgotPassword, onLoginSuccess, onLoginError, hasCreateAccount = false, createAccountRoute, onCreateAccount, transformLoginData, authenticatorType, loginFieldType = 'username', customLoginFields, className = '', features, sideContentClass, footer, phoneOtpConfig, }) {
     const { login, error: authError } = useAuth();
     const { addToast } = useToast();
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const formRef = useRef(null);
+    const [activeTab, setActiveTab] = useState('password');
+    const [phoneStep, setPhoneStep] = useState('enterPhone');
+    const [phoneNumber, setPhoneNumber] = useState('');
+    const [phoneOtpValue, setPhoneOtpValue] = useState('');
+    const [isSendingOtp, setIsSendingOtp] = useState(false);
+    const [isVerifyingOtp, setIsVerifyingOtp] = useState(false);
+    const [isResendingOtp, setIsResendingOtp] = useState(false);
+    const [phoneError, setPhoneError] = useState(null);
+    const [phoneCountdown, setPhoneCountdown] = useState(0);
+    const [canResendPhone, setCanResendPhone] = useState(true);
+    const startCountdown = (seconds) => {
+        setPhoneCountdown(seconds);
+        setCanResendPhone(false);
+        const tick = () => {
+            setPhoneCountdown((prev) => {
+                if (prev <= 1) {
+                    setCanResendPhone(true);
+                    return 0;
+                }
+                setTimeout(tick, 1000);
+                return prev - 1;
+            });
+        };
+        setTimeout(tick, 1000);
+    };
+    const phoneNumberField = [
+        {
+            name: 'phoneNumber',
+            label: 'Phone Number',
+            type: 'tel',
+            placeholder: '+27 82 123 4567',
+            gridSpan: 12,
+            defaultCountry: 'ZA',
+            validation: { required: 'Phone number is required' },
+        },
+    ];
+    const handlePhoneFormSubmit = async (data) => {
+        const phone = data.phoneNumber;
+        setIsSendingOtp(true);
+        setPhoneError(null);
+        try {
+            await phoneOtpConfig.sendOtp(phone);
+            setPhoneNumber(phone);
+            setPhoneStep('enterOtp');
+            startCountdown(phoneOtpConfig.resendCountdown ?? 60);
+        }
+        catch (err) {
+            setPhoneError(err?.response?.data?.message ?? err?.message ?? 'Failed to send OTP. Please try again.');
+            throw err;
+        }
+        finally {
+            setIsSendingOtp(false);
+        }
+    };
+    const handleResendPhoneOtp = async () => {
+        if (!canResendPhone || isResendingOtp)
+            return;
+        setIsResendingOtp(true);
+        setPhoneError(null);
+        try {
+            await phoneOtpConfig.sendOtp(phoneNumber);
+            startCountdown(phoneOtpConfig.resendCountdown ?? 60);
+            setPhoneOtpValue('');
+        }
+        catch (err) {
+            setPhoneError(err?.response?.data?.message ?? err?.message ?? 'Failed to resend OTP.');
+        }
+        finally {
+            setIsResendingOtp(false);
+        }
+    };
+    const handleVerifyPhoneOtp = async () => {
+        if (phoneOtpValue.length !== 6)
+            return;
+        setIsVerifyingOtp(true);
+        setPhoneError(null);
+        try {
+            const response = await phoneOtpConfig.verifyOtp(phoneNumber, phoneOtpValue);
+            onLoginSuccess?.(response);
+        }
+        catch (err) {
+            setPhoneError(err?.response?.data?.message ?? err?.message ?? 'Verification failed. Please try again.');
+        }
+        finally {
+            setIsVerifyingOtp(false);
+        }
+    };
     // Generate the identifier field based on loginFieldType
     const identifierField = loginFieldType === 'email'
         ? {
@@ -136,10 +224,23 @@ export function PagamioLoginPage({ logo, text = loginPageDefaultText, appLabel,
             window.location.href = createAccountRoute;
         }
     };
-    return (_jsx(AuthPageLayout, { appLabel: appLabel, title: text.welcomeTitle, subtitle: text.welcomeSubtitle, errorMessage: error ?? authError?.message, logo: logo, className: className, horizontal: false, sideContent: features && features.length > 0 ? _jsx(FeatureCarousel, { features: features }) : undefined, sideContentClass: sideContentClass, footer: footer, children: _jsxs("div", { className: "mt-8", children: [_jsx(FormEngine, { fields: loginFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.loginButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef, initialValues: {
-                        ...(loginFieldType === 'email' ? { email: '' } : { username: '' }),
-                        password: '',
-                        rememberMe: false,
-                    } }), _jsxs("div", { className: "flex items-center justify-center gap-x-4 mt-4", children: [onForgotPassword && (_jsx(Button, { type: "button", variant: "link", onClick: onForgotPassword, className: "text-sm text-primary hover:underline", children: text.forgotPasswordLabel })), hasCreateAccount && (_jsxs(_Fragment, { children: [onForgotPassword && _jsx("span", { className: "text-muted-foreground", children: "|" }), _jsx(Button, { type: "button", variant: "link", onClick: handleCreateAccount, className: "text-sm text-primary hover:underline", children: text.createAccountLabel })] }))] })] }) }));
+    const passwordTabLabel = phoneOtpConfig?.passwordTabLabel ?? 'Email & Password';
+    const phoneTabLabel = phoneOtpConfig?.tabLabel ?? 'Phone + OTP';
+    return (_jsx(AuthPageLayout, { appLabel: appLabel, title: text.welcomeTitle, subtitle: text.welcomeSubtitle, errorMessage: activeTab === 'password' ? (error ?? authError?.message) : undefined, logo: logo, className: className, horizontal: false, sideContent: features && features.length > 0 ? _jsx(FeatureCarousel, { features: features }) : undefined, sideContentClass: sideContentClass, footer: footer, children: _jsxs("div", { className: "mt-8", children: [phoneOtpConfig && (_jsxs("div", { className: "mb-6 flex rounded-lg border border-border overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => setActiveTab('password'), className: `flex-1 py-2 text-sm font-medium transition-colors ${activeTab === 'password' ? 'bg-primary text-primary-foreground' : 'bg-background text-foreground/70 hover:bg-muted'}`, children: passwordTabLabel }), _jsx("button", { type: "button", onClick: () => {
+                                setActiveTab('phone');
+                                setPhoneStep('enterPhone');
+                                setPhoneError(null);
+                            }, className: `flex-1 py-2 text-sm font-medium transition-colors ${activeTab === 'phone' ? 'bg-primary text-primary-foreground' : 'bg-background text-foreground/70 hover:bg-muted'}`, children: phoneTabLabel })] })), activeTab === 'password' && (_jsxs(_Fragment, { children: [_jsx(FormEngine, { fields: loginFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.loginButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef, initialValues: {
+                                ...(loginFieldType === 'email' ? { email: '' } : { username: '' }),
+                                password: '',
+                                rememberMe: false,
+                            } }), _jsxs("div", { className: "flex items-center justify-center gap-x-4 mt-4", children: [onForgotPassword && (_jsx(Button, { type: "button", variant: "link", onClick: onForgotPassword, className: "text-sm text-primary hover:underline", children: text.forgotPasswordLabel })), hasCreateAccount && (_jsxs(_Fragment, { children: [onForgotPassword && _jsx("span", { className: "text-muted-foreground", children: "|" }), _jsx(Button, { type: "button", variant: "link", onClick: handleCreateAccount, className: "text-sm text-primary hover:underline", children: text.createAccountLabel })] }))] })] })), activeTab === 'phone' && phoneOtpConfig && (_jsxs("div", { className: "space-y-4", children: [phoneError && _jsx("div", { className: "rounded-lg bg-red-50 p-4 text-sm text-red-600", children: phoneError }), phoneStep === 'enterPhone' && (_jsxs(_Fragment, { children: [_jsx(FormEngine, { fields: phoneNumberField, onSubmit: handlePhoneFormSubmit, layout: "vertical", className: "mb-0 px-0", submitButtonClass: "w-full", submitButtonText: isSendingOtp ? 'Sending code...' : 'Send code', onCancel: () => { }, showCancelButton: false, showSubmittingText: false, initialValues: { phoneNumber: '' } }), hasCreateAccount && (_jsx("div", { className: "text-center mt-2", children: _jsx(Button, { type: "button", variant: "link", onClick: handleCreateAccount, className: "text-sm text-primary hover:underline", children: text.createAccountLabel }) }))] })), phoneStep === 'enterOtp' && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-sm text-muted-foreground text-center", children: ["Enter the 6-digit code sent to ", _jsx("span", { className: "font-medium text-foreground", children: phoneNumber })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 block text-sm font-medium text-foreground text-center", children: "Verification Code" }), _jsx(OtpInput, { length: 6, value: phoneOtpValue, onChange: (v) => {
+                                                setPhoneOtpValue(v);
+                                                setPhoneError(null);
+                                            }, disabled: isVerifyingOtp })] }), _jsx(Button, { type: "button", onClick: handleVerifyPhoneOtp, disabled: phoneOtpValue.length !== 6 || isVerifyingOtp, className: "w-full", size: "lg", children: isVerifyingOtp ? 'Verifying...' : 'Verify & Sign In' }), _jsx("div", { className: "text-center text-sm text-muted-foreground", children: canResendPhone ? (_jsx(Button, { type: "button", variant: "ghost", onClick: handleResendPhoneOtp, disabled: isResendingOtp, className: "text-sm font-medium text-primary hover:text-primary/90", children: isResendingOtp ? 'Sending...' : 'Resend code' })) : (_jsxs("span", { children: ["Resend code in ", _jsxs("span", { className: "font-medium text-foreground", children: [phoneCountdown, "s"] })] })) }), _jsx(Button, { type: "button", variant: "ghost", onClick: () => {
+                                        setPhoneStep('enterPhone');
+                                        setPhoneOtpValue('');
+                                        setPhoneError(null);
+                                    }, className: "w-full text-sm text-foreground/70", children: "\u2190 Change number" })] }))] }))] }) }));
 }
 export default PagamioLoginPage;

package/lib/auth/components/OtpVerification.d.ts

@@ -28,15 +28,34 @@ export interface OtpVerificationHandlers {
         email: string;
     }) => Promise<any>;
 }
+export interface PhoneOtpVerificationHandlers {
+    /** Function to verify OTP using phone number - should throw on error */
+    verifyOtp: (params: {
+        phoneNumber: string;
+        otpCode: string;
+    }) => Promise<any>;
+    /** Function to resend OTP using phone number - should throw on error */
+    resendOtp: (params: {
+        phoneNumber: string;
+    }) => Promise<any>;
+}
 export interface OtpVerificationPageProps {
     /** Email address to verify */
     email: string;
+    /**
+     * Phone number to verify (E.164 format).
+     * When provided alongside `phoneHandlers`, the component switches to phone OTP mode:
+     * shows the phone number instead of email and calls phoneHandlers for verify/resend.
+     */
+    phoneNumber?: string;
     /** Callback when verification is successful */
     onVerifySuccess: (response?: any) => void;
     /** Callback when user clicks back */
     onBack: () => void;
-    /** OTP verification handlers */
+    /** OTP verification handlers (email-based) */
     handlers: OtpVerificationHandlers;
+    /** Phone OTP handlers — required when `phoneNumber` is provided */
+    phoneHandlers?: PhoneOtpVerificationHandlers;
     /** Optional logo configuration */
     logo?: {
         src: string;

package/lib/auth/components/OtpVerification.js

@@ -17,7 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * />
  * ```
  */
-import { HiOutlineArrowLeft, HiOutlineMail } from 'react-icons/hi';
+import { HiOutlineArrowLeft, HiOutlineMail, HiOutlinePhone } from 'react-icons/hi';
 import { useEffect, useRef, useState } from 'react';
 import { Button, Loader } from '../../components';
 // ============================================
@@ -79,7 +79,8 @@ export const OtpInput = ({ length = 6, value, onChange, disabled = false, inputC
 /**
  * Full-page OTP verification component with email display, countdown, and resend functionality
  */
-export const OtpVerificationPage = ({ email, onVerifySuccess, onBack, handlers, logo, config = {}, text: customText = {}, classNames = {}, }) => {
+export const OtpVerificationPage = ({ email, phoneNumber, onVerifySuccess, onBack, handlers, phoneHandlers, logo, config = {}, text: customText = {}, classNames = {}, }) => {
+    const isPhoneMode = Boolean(phoneNumber && phoneHandlers);
     const { otpLength = 6, resendCountdown = 60 } = config;
     const text = { ...otpVerificationDefaultText, ...customText };
     const [otpValue, setOtpValue] = useState('');
@@ -105,7 +106,13 @@ export const OtpVerificationPage = ({ email, onVerifySuccess, onBack, handlers,
         setIsVerifying(true);
         clearError();
         try {
-            const response = await handlers.verifyOtp({ email, otpCode: otpValue });
+            let response;
+            if (isPhoneMode) {
+                response = await phoneHandlers.verifyOtp({ phoneNumber: phoneNumber, otpCode: otpValue });
+            }
+            else {
+                response = await handlers.verifyOtp({ email, otpCode: otpValue });
+            }
             onVerifySuccess(response);
         }
         catch (err) {
@@ -122,7 +129,12 @@ export const OtpVerificationPage = ({ email, onVerifySuccess, onBack, handlers,
         setIsResending(true);
         clearError();
         try {
-            await handlers.resendOtp({ email });
+            if (isPhoneMode) {
+                await phoneHandlers.resendOtp({ phoneNumber: phoneNumber });
+            }
+            else {
+                await handlers.resendOtp({ email });
+            }
             setCountdown(resendCountdown);
             setCanResend(false);
             setOtpValue('');
@@ -135,7 +147,7 @@ export const OtpVerificationPage = ({ email, onVerifySuccess, onBack, handlers,
             setIsResending(false);
         }
     };
-    return (_jsx("div", { className: `flex min-h-screen items-center justify-center bg-muted px-4 py-12 ${classNames.container ?? ''}`, children: _jsxs("div", { className: "w-full max-w-md", children: [logo && (_jsxs("div", { className: "mb-8 flex justify-center", children: [_jsx("img", { src: logo.src, alt: logo.alt, width: logo.width, height: logo.height, className: `h-auto max-h-16${logo.darkSrc ? ' dark:hidden' : ''}` }), logo.darkSrc && (_jsx("img", { src: logo.darkSrc, alt: logo.alt, width: logo.width, height: logo.height, className: "h-auto max-h-16 hidden dark:block" }))] })), _jsxs("div", { className: `rounded-2xl border border-border bg-background p-8 shadow-sm ${classNames.card ?? ''}`, children: [_jsxs("div", { className: `mb-6 text-center ${classNames.header ?? ''}`, children: [_jsx("div", { className: `mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/15 ${classNames.icon ?? ''}`, children: _jsx(HiOutlineMail, { className: "h-8 w-8 text-primary" }) }), _jsx("h1", { className: "text-2xl font-bold text-foreground", children: text.title }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: text.subtitle }), _jsx("p", { className: "mt-1 font-medium text-foreground", children: email })] }), error && _jsx("div", { className: "mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-600", children: error }), _jsxs("div", { className: "mb-6", children: [_jsx("p", { className: "mb-2 block text-sm font-medium text-foreground", children: text.codeLabel }), _jsx(OtpInput, { length: otpLength, value: otpValue, onChange: (value) => {
+    return (_jsx("div", { className: `flex min-h-screen items-center justify-center bg-muted px-4 py-12 ${classNames.container ?? ''}`, children: _jsxs("div", { className: "w-full max-w-md", children: [logo && (_jsxs("div", { className: "mb-8 flex justify-center", children: [_jsx("img", { src: logo.src, alt: logo.alt, width: logo.width, height: logo.height, className: `h-auto max-h-16${logo.darkSrc ? ' dark:hidden' : ''}` }), logo.darkSrc && (_jsx("img", { src: logo.darkSrc, alt: logo.alt, width: logo.width, height: logo.height, className: "h-auto max-h-16 hidden dark:block" }))] })), _jsxs("div", { className: `rounded-2xl border border-border bg-background p-8 shadow-sm ${classNames.card ?? ''}`, children: [_jsxs("div", { className: `mb-6 text-center ${classNames.header ?? ''}`, children: [_jsx("div", { className: `mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/15 ${classNames.icon ?? ''}`, children: isPhoneMode ? (_jsx(HiOutlinePhone, { className: "h-8 w-8 text-primary" })) : (_jsx(HiOutlineMail, { className: "h-8 w-8 text-primary" })) }), _jsx("h1", { className: "text-2xl font-bold text-foreground", children: text.title }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: text.subtitle }), _jsx("p", { className: "mt-1 font-medium text-foreground", children: isPhoneMode ? phoneNumber : email })] }), error && _jsx("div", { className: "mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-600", children: error }), _jsxs("div", { className: "mb-6", children: [_jsx("p", { className: "mb-2 block text-sm font-medium text-foreground", children: text.codeLabel }), _jsx(OtpInput, { length: otpLength, value: otpValue, onChange: (value) => {
                                         setOtpValue(value);
                                         clearError();
                                     }, disabled: isVerifying })] }), _jsx(Button, { onClick: handleVerify, disabled: otpValue.length !== otpLength || isVerifying, className: "w-full", size: "lg", children: isVerifying ? (_jsxs(_Fragment, { children: [_jsx(Loader, { size: "sm", className: "mr-2" }), text.verifyingButton] })) : (text.verifyButton) }), _jsx("div", { className: "mt-6 text-center", children: canResend ? (_jsx(Button, { type: "button", variant: "ghost", onClick: handleResend, disabled: isResending, className: "text-sm font-medium text-primary hover:text-primary/90 disabled:text-muted-foreground", children: isResending ? text.resendingButton : text.resendButton })) : (_jsxs("p", { className: "text-sm text-muted-foreground", children: [text.resendCountdownText, " ", _jsxs("span", { className: "font-medium text-foreground", children: [countdown, "s"] })] })) }), _jsx("div", { className: "mt-6 border-t border-border pt-6", children: _jsxs(Button, { type: "button", variant: "ghost", onClick: onBack, className: "flex w-full items-center justify-center gap-2 text-sm text-foreground/70 hover:text-foreground", children: [_jsx(HiOutlineArrowLeft, { className: "h-4 w-4" }), text.backButton] }) })] })] }) }));

package/lib/auth/components/index.d.ts

@@ -1,5 +1,5 @@
 export { default as LogoutButton } from './LogoutButton';
-export { default as PagamioLoginPage, loginPageDefaultText, type LoginFieldType, type PagamioLoginCredentials, type PagamioLoginPageProps, } from './LoginPage';
+export { default as PagamioLoginPage, loginPageDefaultText, type LoginFieldType, type PagamioLoginCredentials, type PagamioLoginPageProps, type PhoneOtpLoginConfig, } from './LoginPage';
 export { default as ChangePasswordPage, type ChangePasswordPageProps } from './ChangePasswordPage';
 export { type PostDataProps } from './hooks/useChangeUserPassword';
 export { default as PagamioCustomerRegistrationPage, customerRegistrationPageDefaultText, type PagamioCustomerRegistrationPageProps, } from './CustomerRegistrationPage';
@@ -7,5 +7,5 @@ export { default as PagamioForgotPasswordPage, forgotPasswordDefaultText, type P
 export { default as PagamioResetPasswordPage, resetPasswordDefaultText, type PagamioResetPasswordPageProps, } from './ResetPasswordPage';
 export { AuthPageLayout as PagamioAuthPageLayout } from './AuthPageLayout';
 export { FeatureCarousel, type FeatureCarouselProps, type FeatureItem } from './FeatureCarousel';
-export { default as OtpVerificationPage, OtpInput, otpVerificationDefaultText, type OtpInputProps, type OtpVerificationConfig, type OtpVerificationHandlers, type OtpVerificationPageProps, type OtpVerificationText, } from './OtpVerification';
+export { default as OtpVerificationPage, OtpInput, otpVerificationDefaultText, type OtpInputProps, type OtpVerificationConfig, type OtpVerificationHandlers, type PhoneOtpVerificationHandlers, type OtpVerificationPageProps, type OtpVerificationText, } from './OtpVerification';
 export { passwordValidation } from './AuthFormUtils';

package/lib/form-engine/FormEngine.js

@@ -8,6 +8,10 @@ import { cn } from '../helpers';
 import FieldWrapper from './components/FieldWrapper';
 import { useFormPersistence } from './hooks/useFormPersistence';
 import { isRegistryReady, setupInputRegistry } from './registry';
+// Eagerly start registry setup when this module is first imported so it is
+// ready (or nearly ready) by the time any FormEngine component mounts.
+// This is safe to call multiple times — the singleton promise is shared.
+setupInputRegistry();
 const CancelButton = ({ isSubmitting, onCancel, isNotTrigger, onClearData }) => {
     const handleCancel = () => {
         if (onClearData) {
@@ -19,12 +23,19 @@ const CancelButton = ({ isSubmitting, onCancel, isNotTrigger, onClearData }) =>
     return isNotTrigger ? (_jsx(Button, { className: sharedClasses, disabled: isSubmitting, onClick: handleCancel, children: "Cancel" })) : (_jsx(SheetRoot, { children: _jsx(SheetTrigger, { asChild: true, children: _jsx(Button, { className: sharedClasses, disabled: isSubmitting, onClick: handleCancel, children: "Cancel" }) }) }));
 };
 const FormEngine = ({ fields, onSubmit, initialValues, layout = 'vertical', isNotTrigger, showCancelButton = true, submitButtonText = 'Save', showSubmittingText = true, submitButtonClass, onCancel, getFieldValues, formRef, className, persistenceKey, }) => {
-    const [registryLoaded, setRegistryLoaded] = useState(isRegistryReady);
+    // Always start as false so server and client agree on the initial render
+    // (avoids SSR hydration mismatch caused by Node.js module cache keeping
+    // registryDone=true across requests while the browser always starts fresh).
+    const [registryLoaded, setRegistryLoaded] = useState(false);
     useEffect(() => {
-        if (!registryLoaded) {
+        if (isRegistryReady()) {
+            // Already resolved by the module-level eager call above.
+            setRegistryLoaded(true);
+        }
+        else {
             setupInputRegistry().then(() => setRegistryLoaded(true));
         }
-    }, [registryLoaded]);
+    }, []);
     const { saveFormData, restoreFormData, clearPersistedData, hasPersistedData } = useFormPersistence(persistenceKey);
     // Determine initial values: persisted data takes precedence over provided initialValues
     const getEffectiveInitialValues = () => {

package/lib/form-engine/components/FieldWrapper.js

@@ -45,11 +45,18 @@ const FieldWrapper = ({ field, control, errors, layout, onFieldUpdate, onFieldCh
         }
     };
     if (field.name === 'email') {
+        const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+        const existingValidate = field.validation?.validate;
         field.validation = {
             ...field.validation,
-            pattern: {
-                value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-                message: 'Please enter a valid email address',
+            // Use validate instead of pattern so empty values are allowed (field is not required unless
+            // the required rule is explicitly set). pattern always runs even on empty strings.
+            validate: (value) => {
+                if (!value)
+                    return true;
+                if (!emailPattern.test(value))
+                    return 'Please enter a valid email address';
+                return existingValidate ? existingValidate(value) : true;
             },
         };
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.278",
+  "version": "0.8.280",
   "publishConfig": {
     "access": "public",
     "provenance": false