Jameson/CT-2171

src/ReturnUserExperience/ReturnUserExperience-test.tsx

@@ -0,0 +1,146 @@
+import React from 'react'
+import { describe, it, expect } from 'vitest'
+import { render, screen } from 'src/utilities/testingLibrary'
+import { ReturnUserExperience } from './ReturnUserExperience'
+
+describe('ReturnUserExperience', () => {
+  const mockAppName = 'Test Financial App'
+
+  const preloadedState = {
+    profiles: {
+      client: {
+        oauth_app_name: mockAppName,
+      },
+    },
+  }
+
+  describe('rendering', () => {
+    it('should render the component without crashing', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      expect(screen.getByText('Connect your accounts')).toBeInTheDocument()
+    })
+
+    it('should render the development warning alert', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const alert = screen.getByText('This feature is currently in development.')
+      expect(alert).toBeInTheDocument()
+    })
+
+    it('should render the main heading', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const heading = screen.getByRole('heading', { level: 2 })
+      expect(heading).toHaveTextContent('Connect your accounts')
+    })
+
+    it('should render the subtitle with app name interpolation', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const subtitle = screen.getByText(new RegExp(mockAppName))
+      expect(subtitle).toBeInTheDocument()
+      expect(subtitle).toHaveTextContent(`${mockAppName} uses MX to connect your accounts.`)
+    })
+
+    it('should render the learn more link', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const link = screen.getByRole('link', { name: /learn more about mx/i })
+      expect(link).toBeInTheDocument()
+      expect(link).toHaveAttribute('href', 'https://mx.com/learn-more')
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+
+    it('should render the MX sign in button', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const button = screen.getByRole('button', { name: /connect faster by signing into mx/i })
+      expect(button).toBeInTheDocument()
+      expect(button).toHaveClass('MuiButton-contained')
+    })
+
+    it('should render the guest sign in button', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const button = screen.getByRole('button', { name: /continue as guest/i })
+      expect(button).toBeInTheDocument()
+      expect(button).toHaveClass('MuiButton-outlined')
+    })
+
+    it('should render both buttons as full width', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const buttons = screen.getAllByRole('button')
+      buttons.forEach((button) => {
+        if (
+          button.textContent?.includes('Connect faster') ||
+          button.textContent?.includes('Continue as guest')
+        ) {
+          expect(button).toHaveClass('MuiButton-fullWidth')
+        }
+      })
+    })
+  })
+
+  describe('Redux state integration', () => {
+    it('should use the oauth_app_name from Redux state', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      expect(screen.getByText(new RegExp(mockAppName))).toBeInTheDocument()
+    })
+
+    it('should display default app name when oauth_app_name is not provided', () => {
+      const emptyState = {
+        profiles: {
+          client: {},
+        },
+      }
+      render(<ReturnUserExperience />, { preloadedState: emptyState })
+      expect(screen.getByText(/This app uses MX to connect your accounts/)).toBeInTheDocument()
+    })
+
+    it('should display default app name when oauth_app_name is null', () => {
+      const nullState = {
+        profiles: {
+          client: {
+            oauth_app_name: null,
+          },
+        },
+      }
+      render(<ReturnUserExperience />, { preloadedState: nullState })
+      expect(screen.getByText(/This app uses MX to connect your accounts/)).toBeInTheDocument()
+    })
+  })
+
+  describe('button interactions', () => {
+    it('should render the MX sign in button as clickable', async () => {
+      const { user } = render(<ReturnUserExperience />, { preloadedState })
+      const button = screen.getByRole('button', { name: /connect faster by signing into mx/i })
+      expect(button).not.toBeDisabled()
+      await user.click(button)
+    })
+
+    it('should render the guest continue button as clickable', async () => {
+      const { user } = render(<ReturnUserExperience />, { preloadedState })
+      const button = screen.getByRole('button', { name: /continue as guest/i })
+      expect(button).not.toBeDisabled()
+      await user.click(button)
+    })
+  })
+
+  describe('accessibility', () => {
+    it('should have proper heading hierarchy', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const heading = screen.getByRole('heading', { level: 2 })
+      expect(heading).toHaveTextContent('Connect your accounts')
+    })
+
+    it('should have accessible buttons', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const buttons = screen.getAllByRole('button')
+      expect(buttons.length).toBeGreaterThanOrEqual(2)
+      buttons.forEach((button) => {
+        expect(button).toHaveAccessibleName()
+      })
+    })
+
+    it('should have an accessible learn more link', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const link = screen.getByRole('link', { name: /learn more about mx/i })
+      expect(link).toHaveAccessibleName()
+    })
+  })
+})

src/ReturnUserExperience/ReturnUserExperience.test.tsx

@@ -0,0 +1,152 @@
+import React from 'react'
+import { render, screen } from 'src/utilities/testingLibrary'
+import { ReturnUserExperience } from './ReturnUserExperience'
+import { initialState } from 'src/services/mockedData'
+
+describe('ReturnUserExperience', () => {
+  const mockAppName = 'Test Financial App'
+
+  const preloadedState = {
+    ...initialState,
+    profiles: {
+      ...initialState.profiles,
+      client: {
+        ...initialState.profiles.client,
+        oauth_app_name: mockAppName,
+      },
+    },
+  }
+
+  describe('rendering', () => {
+    it('should render the component without crashing', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      expect(screen.getByText('Connect your accounts')).toBeInTheDocument()
+    })
+
+    it('should render the main heading', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const heading = screen.getByRole('heading', { level: 2 })
+      expect(heading).toHaveTextContent('Connect your accounts')
+    })
+
+    it('should render the subtitle with app name interpolation', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const subtitle = screen.getByText(new RegExp(mockAppName))
+      expect(subtitle).toBeInTheDocument()
+      expect(subtitle).toHaveTextContent(`${mockAppName} uses MX to connect your accounts.`)
+    })
+
+    it('should render the learn more link', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const link = screen.getByRole('link', { name: /learn more about mx/i })
+      expect(link).toBeInTheDocument()
+      expect(link).toHaveAttribute('href', 'https://mx.com/learn-more')
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer')
+    })
+
+    it('should render the MX sign in button', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const button = screen.getByRole('button', { name: /connect faster by signing into mx/i })
+      expect(button).toBeInTheDocument()
+      expect(button).toHaveClass('MuiButton-contained')
+    })
+
+    it('should render the guest sign in button', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const button = screen.getByRole('button', { name: /continue as guest/i })
+      expect(button).toBeInTheDocument()
+      expect(button).toHaveClass('MuiButton-outlined')
+    })
+
+    it('should render both buttons as full width', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const buttons = screen.getAllByRole('button')
+      buttons.forEach((button) => {
+        if (
+          button.textContent?.includes('Connect faster') ||
+          button.textContent?.includes('Continue as guest')
+        ) {
+          expect(button).toHaveClass('MuiButton-fullWidth')
+        }
+      })
+    })
+  })
+
+  describe('Redux state integration', () => {
+    const undefinedState = {
+      ...initialState,
+      profiles: {
+        ...initialState.profiles,
+        client: {
+          ...initialState.profiles.client,
+          oauth_app_name: undefined,
+        },
+      },
+    }
+    const nullState = {
+      ...initialState,
+      profiles: {
+        ...initialState.profiles,
+        client: {
+          ...initialState.profiles.client,
+          oauth_app_name: null,
+        },
+      },
+    }
+
+    it('should use the oauth_app_name from Redux state', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      expect(screen.getByText(new RegExp(mockAppName))).toBeInTheDocument()
+    })
+
+    it('should display default app name when oauth_app_name is not provided', () => {
+      render(<ReturnUserExperience />, { preloadedState: undefinedState })
+      expect(screen.getByText(/This app uses MX to connect your accounts/)).toBeInTheDocument()
+    })
+
+    it('should display default app name when oauth_app_name is null', () => {
+      render(<ReturnUserExperience />, { preloadedState: nullState })
+      expect(screen.getByText(/This app uses MX to connect your accounts/)).toBeInTheDocument()
+    })
+  })
+
+  describe('button interactions', () => {
+    it('should render the MX sign in button as clickable', async () => {
+      const { user } = render(<ReturnUserExperience />, { preloadedState })
+      const button = screen.getByRole('button', { name: /connect faster by signing into mx/i })
+      expect(button).not.toBeDisabled()
+      await user.click(button)
+    })
+
+    it('should render the guest continue button as clickable', async () => {
+      const { user } = render(<ReturnUserExperience />, { preloadedState })
+      const button = screen.getByRole('button', { name: /continue as guest/i })
+      expect(button).not.toBeDisabled()
+      await user.click(button)
+    })
+  })
+
+  describe('accessibility', () => {
+    it('should have proper heading hierarchy', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const heading = screen.getByRole('heading', { level: 2 })
+      expect(heading).toHaveTextContent('Connect your accounts')
+    })
+
+    it('should have accessible buttons', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const buttons = screen.getAllByRole('button')
+      expect(buttons.length).toBeGreaterThanOrEqual(2)
+      buttons.forEach((button) => {
+        expect(button).toHaveAccessibleName()
+      })
+    })
+
+    it('should have an accessible learn more link', () => {
+      render(<ReturnUserExperience />, { preloadedState })
+      const link = screen.getByRole('link', { name: /learn more about mx/i })
+      expect(link).toHaveAccessibleName()
+    })
+  })
+})

src/ReturnUserExperience/ReturnUserExperience.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import styles from './returnUserExperience.module.css'
 import RuxInfo from 'src/ReturnUserExperience/RuxInfo'
+import { RuxPhoneNumber } from 'src/ReturnUserExperience/RuxPhoneNumber'
 
 import { Stack } from '@mui/material'
 import { Icon } from '@mxenabled/mxui'
@@ -12,6 +13,8 @@ import useAnalyticsEvent from 'src/hooks/useAnalyticsEvent'
 import { __ } from 'src/utilities/Intl'
 import { AnalyticEvents } from 'src/const/Analytics'
 import { RootState } from 'src/redux/Store'
+import { ActionTypes } from 'src/redux/actions/Connect'
+import { selectInitialConfig } from 'src/redux/reducers/configSlice'
 import { ClientLogo } from 'src/components/ClientLogo'
 
 export const RUXViews = {
@@ -23,30 +26,51 @@ export const RUXViews = {
 
 export const ReturnUserExperience = React.forwardRef(() => {
   const [view, setView] = React.useState<(typeof RUXViews)[keyof typeof RUXViews]>(RUXViews.INFO)
+  const [userEnteredPhone, setUserEnteredPhone] = React.useState('')
   const clientGuid = useSelector((state: RootState) => state.profiles.client.guid)
+  const connectConfig = useSelector(selectInitialConfig)
+  const dispatch = useDispatch()
   const sendAnalyticsEvent = useAnalyticsEvent()
 
   const handleRuxInfoContinue = () => {
     // This is currently skipping the backend. See epic/ticket for more details.
     sendAnalyticsEvent(AnalyticEvents.RUX_INFO_CONTINUE_CLICKED)
     setView(RUXViews.PHONE_NUMBER)
   }
+  const handleContinueWithoutPhone = () =>
+    dispatch({ type: ActionTypes.RESET_WIDGET_MFA_STEP, payload: connectConfig })
 
   return (
     <div className={styles.pageContainer}>
       {view !== RUXViews.LIST && (
         <Stack className={styles.logoHeaders} direction="row" spacing="8px">
-          <div className={styles.clientLogo}>
-            <ClientLogo alt="Client logo" clientGuid={clientGuid} size={64} />
-          </div>
-          <Icon name="add" size={20} />
+          {view === RUXViews.INFO && (
+            <>
+              <div className={styles.clientLogo}>
+                <ClientLogo alt="Client logo" clientGuid={clientGuid} size={64} />
+              </div>
+              <Icon name="add" size={20} />
+            </>
+          )}
           <div className={styles.mxLogo}>
             <MXLogoFilledIcon size={64} />
           </div>
         </Stack>
       )}
 
       {view === RUXViews.INFO && <RuxInfo handleRuxContinue={handleRuxInfoContinue} />}
+
+      {view === RUXViews.PHONE_NUMBER && (
+        <RuxPhoneNumber
+          handleContinueWithoutPhone={handleContinueWithoutPhone}
+          handleRuxContinue={() => {
+            // sendAnalyticsEvent(AnalyticEvents.RUX_PHONE_NUMBER_CONTINUE_CLICKED)
+            setView(RUXViews.OTP)
+          }}
+          setUserEnteredPhone={setUserEnteredPhone}
+          userEnteredPhone={userEnteredPhone}
+        />
+      )}
     </div>
   )
 })