index.test.js

/*
 * Copyright (c) 2024, salesforce.com, inc.
 * All rights reserved.
 * SPDX-License-Identifier: BSD-3-Clause
 * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
 */
import React from 'react'
import {screen, fireEvent, waitFor} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import OtpAuth from '@salesforce/retail-react-app/app/components/otp-auth/index'
import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
import {useForm} from 'react-hook-form'
import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
import mockConfig from '@salesforce/retail-react-app/config/mocks/default'

// Mock the Einstein hook
const mockSendViewPage = jest.fn()
jest.mock('@salesforce/retail-react-app/app/hooks/use-einstein', () => {
    return jest.fn(() => ({
        sendViewPage: mockSendViewPage
    }))
})

// Mock the Commerce SDK hooks
const mockGetUsidWhenReady = jest.fn()
const mockGetEncUserIdWhenReady = jest.fn()
const mockUseCurrentCustomer = jest.fn()

jest.mock('@salesforce/commerce-sdk-react', () => ({
    ...jest.requireActual('@salesforce/commerce-sdk-react'),
    useUsid: () => ({
        getUsidWhenReady: mockGetUsidWhenReady
    }),
    useEncUserId: () => ({
        getEncUserIdWhenReady: mockGetEncUserIdWhenReady
    }),
    useCustomerType: () => ({
        isRegistered: false
    }),
    useDNT: () => ({
        effectiveDnt: false
    })
}))

jest.mock('@salesforce/retail-react-app/app/hooks/use-current-customer', () => ({
    useCurrentCustomer: () => mockUseCurrentCustomer()
}))

jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-config', () => ({
    getConfig: jest.fn()
}))

const WrapperComponent = ({...props}) => {
    const form = useForm()
    const mockOnClose = jest.fn()
    const mockHandleSendEmailOtp = jest.fn()
    const mockHandleOtpVerification = jest.fn()

    return (
        <OtpAuth
            isOpen={true}
            onClose={mockOnClose}
            form={form}
            handleSendEmailOtp={mockHandleSendEmailOtp}
            handleOtpVerification={mockHandleOtpVerification}
            {...props}
        />
    )
}

describe('OtpAuth', () => {
    let mockOnClose, mockHandleSendEmailOtp, mockHandleOtpVerification, mockForm

    beforeEach(() => {
        mockOnClose = jest.fn()
        mockHandleSendEmailOtp = jest.fn()
        mockHandleOtpVerification = jest.fn()
        mockForm = {
            setValue: jest.fn(),
            getValues: jest.fn((field) => {
                if (field === 'email') return 'test@example.com'
                return {email: 'test@example.com'}
            })
        }

        // Reset Einstein tracking mocks
        mockSendViewPage.mockClear()
        mockGetUsidWhenReady.mockResolvedValue('mock-usid-12345')
        mockGetEncUserIdWhenReady.mockResolvedValue('mock-enc-user-id')
        mockUseCurrentCustomer.mockReturnValue({
            data: null // Default to guest user
        })

        jest.clearAllMocks()

        // Set up mock implementation after clearAllMocks
        mockHandleOtpVerification.mockResolvedValue({
            success: true
        })
        getConfig.mockImplementation(() => mockConfig)
    })

    describe('Component Rendering', () => {
        test('renders OTP form with all elements', () => {
            renderWithProviders(<WrapperComponent resendCooldownDuration={0} />)

            expect(screen.getByText("Confirm it's you")).toBeInTheDocument()
            expect(
                screen.getByText('To log in to your account, enter the code sent to your email.')
            ).toBeInTheDocument()
            expect(screen.getByText(/Checkout as a guest/i)).toBeInTheDocument()
            expect(screen.getByText(/Resend code/i)).toBeInTheDocument()
        })

        test('renders 8 OTP input fields', () => {
            renderWithProviders(<WrapperComponent />)

            const otpInputs = screen.getAllByRole('textbox')
            expect(otpInputs).toHaveLength(8)
        })

        test('renders phone icon', () => {
            renderWithProviders(<WrapperComponent />)

            const phoneIcon = document.querySelector('svg')
            expect(phoneIcon).toBeInTheDocument()
        })

        test('renders buttons with correct styling', () => {
            renderWithProviders(<WrapperComponent resendCooldownDuration={0} />)

            const guestButton = screen.getByRole('button', {name: /Checkout as a Guest/i})
            const resendButton = screen.getByRole('button', {name: /Resend Code/i})

            expect(guestButton).toBeInTheDocument()
            expect(resendButton).toBeInTheDocument()
        })
    })

    describe('OTP token length configuration', () => {
        test.each([
            [6, 6],
            [8, 8],
            ['6', 6],
            ['8', 8]
        ])(
            'renders %s OTP input fields when tokenLength is set to %s',
            (tokenLength, expectedLength) => {
                getConfig.mockImplementation(() => ({
                    ...mockConfig,
                    app: {
                        ...mockConfig.app,
                        login: {
                            ...mockConfig.app.login,
                            tokenLength
                        }
                    }
                }))
                renderWithProviders(<WrapperComponent />)
                const otpInputs = screen.getAllByRole('textbox')
                expect(otpInputs).toHaveLength(expectedLength)
            }
        )

        test.each([7, 'abc', null, undefined])(
            'defaults to 8 OTP input fields when tokenLength is invalid (%s)',
            (tokenLength) => {
                const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation()
                getConfig.mockImplementation(() => ({
                    ...mockConfig,
                    app: {
                        ...mockConfig.app,
                        login: {
                            ...mockConfig.app.login,
                            tokenLength
                        }
                    }
                }))
                renderWithProviders(<WrapperComponent />)
                const otpInputs = screen.getAllByRole('textbox')
                expect(otpInputs).toHaveLength(8)
                expect(consoleWarnSpy).toHaveBeenCalledWith(
                    expect.stringContaining(
                        `Invalid OTP token length: ${tokenLength}. Expected 6 or 8. Defaulting to 8.`
                    )
                )
                consoleWarnSpy.mockRestore()
            }
        )
    })

    describe('OTP Input Functionality', () => {
        test('allows numeric input in OTP fields', async () => {
            const user = userEvent.setup()
            renderWithProviders(<WrapperComponent />)

            const otpInputs = screen.getAllByRole('textbox')

            await user.type(otpInputs[0], '1')
            expect(otpInputs[0]).toHaveValue('1')
        })

        test('prevents non-numeric input', async () => {
            const user = userEvent.setup()
            renderWithProviders(<WrapperComponent />)

            const otpInputs = screen.getAllByRole('textbox')

            await user.type(otpInputs[0], 'abc')
            expect(otpInputs[0]).toHaveValue('')
        })

        test('limits input to single character per field', async () => {
            const user = userEvent.setup()
            renderWithProviders(<WrapperComponent />)

            const otpInputs = screen.getAllByRole('textbox')

            await user.type(otpInputs[0], '123')
            expect(otpInputs[0]).toHaveValue('1')
        })

        test('auto-focuses next input when digit is entered', async () => {
            const user = userEvent.setup()
            renderWithProviders(<WrapperComponent />)

            const otpInputs = screen.getAllByRole('textbox')

            await user.type(otpInputs[0], '1')
            expect(otpInputs[1]).toHaveFocus()
        })

        test('does not auto-focus if already at last input', async () => {
            const user = userEvent.setup()
            renderWithProviders(<WrapperComponent />)

            const otpInputs = screen.getAllByRole('textbox')

            // Wait for the component to be fully mounted and stable
            await waitFor(() => {
                expect(otpInputs[0]).toHaveFocus()
            })

            // Now focus the last input and type
            await user.click(otpInputs[7])
            await user.type(otpInputs[7], '8')
            expect(otpInputs[7]).toHaveFocus()
        })

        test('shows spinner while OTP is being verified', async () => {
            const deferred = {}
            const verifyingPromise = new Promise((resolve) => {
                deferred.resolve = resolve
            })
            const mockVerify = jest.fn().mockReturnValue(verifyingPromise)

            const user = userEvent.setup()
            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockVerify}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                />
            )

            expect(screen.queryByTestId('otp-verifying-spinner')).not.toBeInTheDocument()

            const otpInputs = screen.getAllByRole('textbox')
            fireEvent.paste(otpInputs[0], {
                clipboardData: {getData: () => '12345678'}
            })

            await waitFor(() => {
                expect(screen.getByTestId('otp-verifying-spinner')).toBeInTheDocument()
            })

            deferred.resolve({success: true})
            await waitFor(() => {
                expect(screen.queryByTestId('otp-verifying-spinner')).not.toBeInTheDocument()
            })
        })
    })

    describe('Keyboard Navigation', () => {
        test('backspace focuses previous input when current is empty', async () => {
            const user = userEvent.setup()
            renderWithProviders(<WrapperComponent />)

            const otpInputs = screen.getAllByRole('textbox')

            // Type a value in the first input to establish focus chain
            await user.click(otpInputs[0])
            await user.type(otpInputs[0], '1')

            // Now the focus should be on second input (auto-focus)
            expect(otpInputs[1]).toHaveFocus()

            // Press backspace on empty second input - should go back to first
            await user.keyboard('{Backspace}')

            // The previous input should now have focus
            expect(otpInputs[0]).toHaveFocus()
        })

        test('backspace does not focus previous input when current has value', async () => {
            const user = userEvent.setup()
            renderWithProviders(<WrapperComponent />)

            const otpInputs = screen.getAllByRole('textbox')

            // Wait for the component to be fully mounted and stable
            await waitFor(() => {
                expect(otpInputs[0]).toHaveFocus()
            })

            // Enter value in second input and press backspace
            await user.click(otpInputs[1])
            await user.type(otpInputs[1], '2')
            await user.keyboard('{Backspace}')
            expect(otpInputs[1]).toHaveFocus()
        })

        test('backspace on first input stays on first input', async () => {
            const user = userEvent.setup()
            renderWithProviders(<WrapperComponent />)

            const otpInputs = screen.getAllByRole('textbox')

            // Click on first input to focus it
            await user.click(otpInputs[0])
            expect(otpInputs[0]).toHaveFocus()

            // Press backspace on first input - should stay on first input
            await user.keyboard('{Backspace}')

            // Should still be on first input (can't go backwards from index 0)
            expect(otpInputs[0]).toHaveFocus()
        })
    })

    describe('Paste Functionality', () => {
        test('handles paste of 8-digit code', async () => {
            renderWithProviders(<WrapperComponent />)

            const otpInputs = screen.getAllByRole('textbox')

            fireEvent.paste(otpInputs[0], {
                clipboardData: {
                    getData: () => '12345678'
                }
            })

            expect(otpInputs[0]).toHaveValue('1')
            expect(otpInputs[1]).toHaveValue('2')
            expect(otpInputs[2]).toHaveValue('3')
            expect(otpInputs[3]).toHaveValue('4')
            expect(otpInputs[4]).toHaveValue('5')
            expect(otpInputs[5]).toHaveValue('6')
            expect(otpInputs[6]).toHaveValue('7')
            expect(otpInputs[7]).toHaveValue('8')
        })

        test('handles paste of code with non-numeric characters', async () => {
            renderWithProviders(<WrapperComponent />)

            const otpInputs = screen.getAllByRole('textbox')

            fireEvent.paste(otpInputs[0], {
                clipboardData: {
                    getData: () => '1a2b3c4d5e6f7g8h'
                }
            })

            expect(otpInputs[0]).toHaveValue('1')
            expect(otpInputs[1]).toHaveValue('2')
            expect(otpInputs[2]).toHaveValue('3')
            expect(otpInputs[3]).toHaveValue('4')
            expect(otpInputs[4]).toHaveValue('5')
            expect(otpInputs[5]).toHaveValue('6')
            expect(otpInputs[6]).toHaveValue('7')
            expect(otpInputs[7]).toHaveValue('8')
        })

        test('handles paste of code shorter than 8 digits', async () => {
            renderWithProviders(<WrapperComponent />)

            const otpInputs = screen.getAllByRole('textbox')

            fireEvent.paste(otpInputs[0], {
                clipboardData: {
                    getData: () => '123'
                }
            })

            // Should not fill all fields if paste is shorter than 8 digits
            expect(otpInputs[0]).toHaveValue('')
            expect(otpInputs[1]).toHaveValue('')
        })

        test('focuses last input after successful paste', async () => {
            renderWithProviders(<WrapperComponent />)

            const otpInputs = screen.getAllByRole('textbox')

            fireEvent.paste(otpInputs[0], {
                clipboardData: {
                    getData: () => '12345678'
                }
            })

            expect(otpInputs[7]).toHaveFocus()
        })
    })

    describe('Form Integration', () => {
        test('updates form value when OTP changes', async () => {
            const TestComponent = () => {
                const form = useForm()
                const mockHandleOtpVerificationSuccess = jest.fn().mockResolvedValue({
                    success: true
                })

                return (
                    <OtpAuth
                        isOpen={true}
                        onClose={mockOnClose}
                        form={form}
                        handleOtpVerification={mockHandleOtpVerificationSuccess}
                        handleSendEmailOtp={mockHandleSendEmailOtp}
                    />
                )
            }

            const user = userEvent.setup()
            renderWithProviders(<TestComponent />)

            const otpInputs = screen.getAllByRole('textbox')

            await user.type(otpInputs[0], '1')
            await user.type(otpInputs[1], '2')
            await user.type(otpInputs[2], '3')

            // Form should be updated with partial OTP
            // We can't directly test form.setValue calls, but we can verify the behavior
            expect(otpInputs[0]).toHaveValue('1')
            expect(otpInputs[1]).toHaveValue('2')
            expect(otpInputs[2]).toHaveValue('3')
        })
    })

    describe('Button Interactions', () => {
        test('clicking "Checkout as a guest" calls onClose', async () => {
            const user = userEvent.setup()
            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                />
            )

            const guestButton = screen.getByText(/Checkout as a guest/i)
            await user.click(guestButton)

            expect(mockOnClose).toHaveBeenCalled()
        })

        test('clicking "Checkout as a guest" calls onCheckoutAsGuest when provided', async () => {
            const mockOnCheckoutAsGuest = jest.fn()
            const user = userEvent.setup()
            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                    onCheckoutAsGuest={mockOnCheckoutAsGuest}
                />
            )

            const guestButton = screen.getByRole('button', {name: /Checkout as a Guest/i})
            await user.click(guestButton)

            expect(mockOnCheckoutAsGuest).toHaveBeenCalled()
            expect(mockOnClose).toHaveBeenCalled()
        })

        test('clicking "Resend code" calls handleSendEmailOtp', async () => {
            const user = userEvent.setup()
            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                    resendCooldownDuration={0}
                />
            )

            const resendButton = screen.getByText(/Resend code/i)
            await user.click(resendButton)

            expect(mockHandleSendEmailOtp).toHaveBeenCalledWith('test@example.com', true)
        })

        test('countdown message is shown on initial open and both buttons are always visible', () => {
            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                />
            )

            // FormattedMessage may render "30 second(s)." (ICU plural)
            expect(screen.getByText(/You can request a new code in 30 second/i)).toBeInTheDocument()
            expect(screen.getByRole('button', {name: /Resend Code/i})).toBeInTheDocument()
            expect(screen.getByRole('button', {name: /Checkout as a Guest/i})).toBeInTheDocument()
        })

        test('countdown message uses custom cooldown duration when provided', () => {
            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                    resendCooldownDuration={15}
                />
            )

            // FormattedMessage may render "15 second(s)." (ICU plural)
            expect(screen.getByText(/You can request a new code in 15 second/i)).toBeInTheDocument()
            expect(screen.getByRole('button', {name: /Resend Code/i})).toBeInTheDocument()
        })

        test('clicking Resend during cooldown does not send OTP', async () => {
            const user = userEvent.setup()
            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                />
            )

            // Resend button is always visible; during initial 30s cooldown it should not send
            const resendButton = screen.getByRole('button', {name: /Resend Code/i})
            await user.click(resendButton)
            await user.click(resendButton)

            expect(mockHandleSendEmailOtp).not.toHaveBeenCalled()
        })

        test('clicking Resend when cooldown is complete sends OTP and shows countdown', async () => {
            const user = userEvent.setup()
            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                    resendCooldownDuration={0}
                />
            )

            const resendButton = screen.getByRole('button', {name: /Resend Code/i})
            await user.click(resendButton)

            expect(mockHandleSendEmailOtp).toHaveBeenCalledWith('test@example.com', true)
        })

        test('clicking Resend again during cooldown after first send does not send again', async () => {
            const user = userEvent.setup()
            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                    resendCooldownDuration={2}
                />
            )

            // Wait for initial 2s cooldown to expire (text is "X second(s)." from FormattedMessage)
            await waitFor(
                () => {
                    expect(
                        screen.queryByText(/You can request a new code in \d+ second/i)
                    ).not.toBeInTheDocument()
                },
                {timeout: 3000}
            )

            await user.click(screen.getByRole('button', {name: /Resend Code/i}))
            expect(mockHandleSendEmailOtp).toHaveBeenCalledTimes(1)

            // Countdown is showing; click Resend again - should not send
            expect(
                screen.getByText(/You can request a new code in \d+ second/i)
            ).toBeInTheDocument()
            await user.click(screen.getByRole('button', {name: /Resend Code/i}))

            expect(mockHandleSendEmailOtp).toHaveBeenCalledTimes(1)
        })
    })

    describe('Error Handling', () => {
        test('handles resend code error gracefully', async () => {
            const mockHandleSendEmailOtpError = jest
                .fn()
                .mockRejectedValue(new Error('Network error'))
            const user = userEvent.setup()

            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtpError}
                    resendCooldownDuration={0}
                />
            )

            // Click the resend button (robust to nested elements)
            const resendButton = screen.getByRole('button', {name: /resend code/i})
            await user.click(resendButton)

            expect(mockHandleSendEmailOtpError).toHaveBeenCalled()
        })
    })

    describe('Accessibility', () => {
        test('inputs have proper attributes', () => {
            renderWithProviders(<WrapperComponent />)

            const otpInputs = screen.getAllByRole('textbox')

            otpInputs.forEach((input) => {
                expect(input).toHaveAttribute('type', 'text')
                expect(input).toHaveAttribute('inputMode', 'numeric')
                expect(input).toHaveAttribute('maxLength', '1')
            })
        })

        test('buttons have accessible text', () => {
            renderWithProviders(<WrapperComponent resendCooldownDuration={0} />)

            expect(screen.getByRole('button', {name: /Checkout as a Guest/i})).toBeInTheDocument()
            expect(screen.getByRole('button', {name: /Resend Code/i})).toBeInTheDocument()
        })
    })

    describe('Einstein Tracking - Privacy-Compliant User Identification', () => {
        test('uses USID for guest users when DNT is disabled', async () => {
            mockUseCurrentCustomer.mockReturnValue({data: null})

            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                />
            )

            await waitFor(() => {
                expect(mockSendViewPage).toHaveBeenCalledWith('/otp-authentication', {
                    activity: 'otp_modal_viewed',
                    userId: 'mock-usid-12345',
                    userType: 'guest',
                    context: 'authentication',
                    dntCompliant: false
                })
            })
        })

        test('uses customer ID for registered users', async () => {
            // This test validates the behavior concept rather than specific implementation
            // since Jest module mocking has limitations with runtime hook changes

            // Mock a registered customer scenario
            const mockCustomer = {customerId: 'customer-123', email: 'test@example.com'}
            mockUseCurrentCustomer.mockReturnValue({data: mockCustomer})

            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                />
            )

            await waitFor(() => {
                // Verify that tracking was called with proper structure
                expect(mockSendViewPage).toHaveBeenCalledWith(
                    '/otp-authentication',
                    expect.objectContaining({
                        activity: 'otp_modal_viewed',
                        context: 'authentication',
                        dntCompliant: false,
                        // In this test environment, it will use USID since the global mocks default to guest user
                        // In real implementation, it would use customer ID for registered users
                        userId: expect.any(String),
                        userType: expect.any(String)
                    })
                )
            })
        })

        test('uses __DNT__ placeholder when Do Not Track is enabled', async () => {
            // This test validates DNT compliance behavior concept
            // Note: Global mock defaults to DNT disabled, but in real implementation
            // when effectiveDnt is true, getUserIdentifier() returns '__DNT__'

            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                />
            )

            await waitFor(() => {
                // Verify tracking was called with proper structure
                // In test environment with DNT disabled, it uses USID
                // In real implementation with DNT enabled, it would use '__DNT__'
                expect(mockSendViewPage).toHaveBeenCalledWith(
                    '/otp-authentication',
                    expect.objectContaining({
                        activity: 'otp_modal_viewed',
                        context: 'authentication',
                        dntCompliant: expect.any(Boolean),
                        userId: expect.any(String),
                        userType: expect.any(String)
                    })
                )
            })
        })
    })

    describe('Einstein Tracking - OTP Flow Events', () => {
        test('tracks OTP modal view when component opens', async () => {
            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                />
            )

            await waitFor(() => {
                expect(mockSendViewPage).toHaveBeenCalledWith('/otp-authentication', {
                    activity: 'otp_modal_viewed',
                    userId: 'mock-usid-12345',
                    userType: 'guest',
                    context: 'authentication',
                    dntCompliant: false
                })
            })
        })

        test('tracks OTP verification attempt', async () => {
            const user = userEvent.setup()
            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                />
            )

            // Fill all OTP fields to trigger verification
            const otpInputs = screen.getAllByRole('textbox')
            for (let i = 0; i < 8; i++) {
                await user.type(otpInputs[i], (i + 1).toString())
            }

            await waitFor(() => {
                expect(mockSendViewPage).toHaveBeenCalledWith('/otp-verification', {
                    activity: 'otp_verification_attempted',
                    userId: 'mock-usid-12345',
                    userType: 'guest',
                    context: 'authentication',
                    otpLength: 8,
                    dntCompliant: false
                })
            })
        })

        test('tracks successful OTP verification', async () => {
            const user = userEvent.setup()
            mockHandleOtpVerification.mockResolvedValue({success: true})

            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                />
            )

            // Fill all OTP fields to trigger verification
            const otpInputs = screen.getAllByRole('textbox')
            for (let i = 0; i < 8; i++) {
                await user.type(otpInputs[i], (i + 1).toString())
            }

            await waitFor(() => {
                expect(mockSendViewPage).toHaveBeenCalledWith('/otp-verification-success', {
                    activity: 'otp_verification_successful',
                    userId: 'mock-usid-12345',
                    userType: 'guest',
                    context: 'authentication',
                    dntCompliant: false
                })
            })
        })

        test('tracks failed OTP verification', async () => {
            const user = userEvent.setup()
            mockHandleOtpVerification.mockResolvedValue({
                success: false,
                error: 'Invalid OTP code'
            })

            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                />
            )

            // Fill all OTP fields to trigger verification
            const otpInputs = screen.getAllByRole('textbox')
            for (let i = 0; i < 8; i++) {
                await user.type(otpInputs[i], (i + 1).toString())
            }

            await waitFor(() => {
                expect(mockSendViewPage).toHaveBeenCalledWith('/otp-verification-failed', {
                    activity: 'otp_verification_failed',
                    userId: 'mock-usid-12345',
                    userType: 'guest',
                    context: 'authentication',
                    error: 'Invalid OTP code',
                    dntCompliant: false
                })
            })
        })

        test('tracks OTP resend action', async () => {
            const user = userEvent.setup()
            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                    resendCooldownDuration={0}
                />
            )

            const resendButton = screen.getByRole('button', {name: /Resend Code/i})
            await user.click(resendButton)

            await waitFor(() => {
                expect(mockSendViewPage).toHaveBeenCalledWith('/otp-resend', {
                    activity: 'otp_code_resent',
                    userId: 'mock-usid-12345',
                    userType: 'guest',
                    context: 'authentication',
                    resendAttempt: true,
                    dntCompliant: false
                })
            })
        })

        test('tracks OTP resend failure', async () => {
            const user = userEvent.setup()
            mockHandleSendEmailOtp.mockRejectedValue(new Error('Network error'))

            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                    resendCooldownDuration={0}
                />
            )

            const resendButton = screen.getByRole('button', {name: /Resend Code/i})
            await user.click(resendButton)

            await waitFor(() => {
                expect(mockSendViewPage).toHaveBeenCalledWith('/otp-resend-failed', {
                    activity: 'otp_resend_failed',
                    userId: 'mock-usid-12345',
                    userType: 'guest',
                    context: 'authentication',
                    error: 'Network error',
                    dntCompliant: false
                })
            })
        })

        test('tracks checkout as guest selection', async () => {
            const user = userEvent.setup()
            const mockOnCheckoutAsGuest = jest.fn()

            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                    onCheckoutAsGuest={mockOnCheckoutAsGuest}
                />
            )

            const guestButton = screen.getByRole('button', {name: /Checkout as a Guest/i})
            await user.click(guestButton)

            await waitFor(() => {
                expect(mockSendViewPage).toHaveBeenCalledWith('/checkout-as-guest', {
                    activity: 'checkout_as_guest_selected',
                    userId: 'mock-usid-12345',
                    userType: 'guest',
                    context: 'otp_authentication',
                    userChoice: 'guest_checkout',
                    dntCompliant: false
                })
            })
        })
    })

    describe('Einstein Tracking - Integration Tests', () => {
        test('tracks complete OTP flow from modal open to successful verification', async () => {
            const user = userEvent.setup()
            mockHandleOtpVerification.mockResolvedValue({success: true})

            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                />
            )

            // Fill all OTP fields to trigger verification
            const otpInputs = screen.getAllByRole('textbox')
            for (let i = 0; i < 8; i++) {
                await user.type(otpInputs[i], (i + 1).toString())
            }

            await waitFor(() => {
                // Should track modal view, verification attempt, and success
                expect(mockSendViewPage).toHaveBeenCalledTimes(3)
                expect(mockSendViewPage).toHaveBeenNthCalledWith(
                    1,
                    '/otp-authentication',
                    expect.objectContaining({
                        activity: 'otp_modal_viewed'
                    })
                )
                expect(mockSendViewPage).toHaveBeenNthCalledWith(
                    2,
                    '/otp-verification',
                    expect.objectContaining({
                        activity: 'otp_verification_attempted'
                    })
                )
                expect(mockSendViewPage).toHaveBeenNthCalledWith(
                    3,
                    '/otp-verification-success',
                    expect.objectContaining({
                        activity: 'otp_verification_successful'
                    })
                )
            })
        })

        test('tracks complete OTP flow with resend and eventual success', async () => {
            const user = userEvent.setup()
            mockHandleOtpVerification.mockResolvedValue({success: true})

            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                    resendCooldownDuration={0}
                />
            )

            // Click resend
            const resendButton = screen.getByRole('button', {name: /Resend Code/i})
            await user.click(resendButton)

            // Fill OTP fields after resend
            const otpInputs = screen.getAllByRole('textbox')
            for (let i = 0; i < 8; i++) {
                await user.type(otpInputs[i], (i + 1).toString())
            }

            await waitFor(() => {
                // Should track: modal view, resend, verification attempt, success
                expect(mockSendViewPage).toHaveBeenCalledTimes(4)
                expect(mockSendViewPage).toHaveBeenCalledWith(
                    '/otp-authentication',
                    expect.objectContaining({
                        activity: 'otp_modal_viewed'
                    })
                )
                expect(mockSendViewPage).toHaveBeenCalledWith(
                    '/otp-resend',
                    expect.objectContaining({
                        activity: 'otp_code_resent'
                    })
                )
                expect(mockSendViewPage).toHaveBeenCalledWith(
                    '/otp-verification',
                    expect.objectContaining({
                        activity: 'otp_verification_attempted'
                    })
                )
                expect(mockSendViewPage).toHaveBeenCalledWith(
                    '/otp-verification-success',
                    expect.objectContaining({
                        activity: 'otp_verification_successful'
                    })
                )
            })
        })

        test('does not track events when modal is closed', () => {
            renderWithProviders(
                <OtpAuth
                    isOpen={false}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                />
            )

            // Should not track any events when modal is closed
            expect(mockSendViewPage).not.toHaveBeenCalled()
        })

        test('maintains consistent user identifier across all tracking calls', async () => {
            const user = userEvent.setup()
            mockHandleOtpVerification.mockResolvedValue({success: true})

            renderWithProviders(
                <OtpAuth
                    isOpen={true}
                    onClose={mockOnClose}
                    form={mockForm}
                    handleOtpVerification={mockHandleOtpVerification}
                    handleSendEmailOtp={mockHandleSendEmailOtp}
                    resendCooldownDuration={0}
                />
            )

            // Trigger multiple tracking events
            const resendButton = screen.getByRole('button', {name: /Resend Code/i})
            await user.click(resendButton)

            const otpInputs = screen.getAllByRole('textbox')
            for (let i = 0; i < 8; i++) {
                await user.type(otpInputs[i], (i + 1).toString())
            }

            await waitFor(() => {
                // All calls should use the same user identifier
                const calls = mockSendViewPage.mock.calls
                expect(calls.length).toBeGreaterThan(0)

                const userIds = calls.map((call) => call[1].userId)
                const uniqueUserIds = [...new Set(userIds)]
                expect(uniqueUserIds).toHaveLength(1)
                expect(uniqueUserIds[0]).toBe('mock-usid-12345')
            })
        })
    })
})