@pagamio/frontend-commons-lib/lib/auth/components/CustomerRegistrationPage.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Generic Registration Page component that works with different authentication configurations.
 * Provides a customizable customer registration interface with support for different branding and text options.
 *
 * @template T - Type extending CustomAuthConfig that defines the shape of authentication data
 *
 * @example
 * ```tsx
 * // Usage with Events App configuration
 * <PagamioRegistrationPage<EventsAppAuthConfig>
 *   logo={{
 *     src: "/logo.svg",
 *     alt: "Company Logo",
 *     width: 280,
 *     height: 250
 *   }}
 *   onRegistrationSuccess={(response) => {
 *     // Handle successful registration
 *   }}
 * />
 * ```
 */
import { useRef, useState } from 'react';
import { useToast } from '../../context';
import { FormEngine } from '../../form-engine';
import { useAuth } from '../context';
import { BackToLoginButton, createFormSubmissionHandler, passwordValidation } from './AuthFormUtils';
import { AuthPageLayout } from './AuthPageLayout';
export const customerRegistrationPageDefaultText = {
    registerTitle: 'Create an Account',
    registerSubtitle: 'Sign up to get started',
    emailLabel: 'Email',
    firstNameLabel: 'First Name',
    lastNameLabel: 'Last Name',
    phoneLabel: 'Phone Number',
    passwordLabel: 'Password',
    confirmPasswordLabel: 'Confirm Password',
    registerButtonLabel: 'Register',
    loadingButtonLabel: 'Registering...',
    backToLoginLabel: 'Back to Login',
};
/**
 * Customer Registration Page component
 * @template T - Authentication configuration type
 */
export function PagamioCustomerRegistrationPage({ logo, text = customerRegistrationPageDefaultText, customRegistrationFields, mapFormDataToRegistration, appLabel, onRegistrationSuccess, onRegistrationError, onBackToLogin, className = '', }) {
    const { authService, error } = useAuth();
    const { addToast } = useToast();
    const [isLoading, setIsLoading] = useState(false);
    const formRef = useRef();
    const registrationFields = [
        {
            name: 'email',
            label: text.emailLabel,
            type: 'email',
            placeholder: 'name@company.com',
            gridSpan: 12,
            validation: {
                required: 'Email is required',
                pattern: {
                    value: /\S+@\S+\.\S+/,
                    message: 'Invalid email address',
                },
            },
        },
        {
            name: 'firstName',
            label: text.firstNameLabel,
            type: 'text',
            placeholder: 'John',
            gridSpan: 6,
            validation: {
                required: 'First name is required',
            },
        },
        {
            name: 'lastName',
            label: text.lastNameLabel,
            type: 'text',
            placeholder: 'Doe',
            gridSpan: 6,
            validation: {
                required: 'Last name is required',
            },
        },
        {
            name: 'phone',
            label: text.phoneLabel,
            type: 'tel',
            placeholder: '+27 71 234 5678',
            gridSpan: 12,
            defaultCountry: 'ZA',
        },
        {
            name: 'password',
            label: text.passwordLabel,
            type: 'password',
            placeholder: 'Enter Password',
            gridSpan: 12,
            validation: passwordValidation,
        },
        {
            name: 'confirmPassword',
            label: text.confirmPasswordLabel,
            type: 'password',
            placeholder: 'Confirm Password',
            gridSpan: 12,
            validation: {
                required: 'Please confirm your password',
            },
        },
    ];
    const handleSubmit = createFormSubmissionHandler({
        setIsLoading,
        addToast,
        formRef,
        onSuccess: (response) => onRegistrationSuccess?.(response),
        onError: onRegistrationError,
    }, async (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
        if (!mapFormDataToRegistration) {
            const { email, firstName, lastName, phone, password } = data;
            return authService.register({
                email,
                password,
                firstName,
                lastName,
                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, children: _jsxs("div", { className: "mt-8", children: [_jsx(FormEngine, { fields: customRegistrationFields ?? registrationFields, onSubmit: handleSubmit, layout: "vertical", className: "mb-0 p-0", submitButtonClass: "w-full", submitButtonText: isLoading ? text.loadingButtonLabel : text.registerButtonLabel, onCancel: () => { }, showCancelButton: false, showSubmittingText: false, formRef: formRef }), onBackToLogin && _jsx(BackToLoginButton, { onBackToLogin: onBackToLogin, label: text.backToLoginLabel })] }) }));
}
export default PagamioCustomerRegistrationPage;