Jameson/CT-2172

src/ReturnUserExperience/ReturnUserExperience.tsx

@@ -3,7 +3,9 @@ import { useSelector } from 'react-redux'
 
 import styles from './returnUserExperience.module.css'
 import RuxInfo from 'src/ReturnUserExperience/RuxInfo'
-import { RuxPhoneNumber } from 'src/ReturnUserExperience/RuxPhoneNumber'
+import RuxPhoneNumber from 'src/ReturnUserExperience/RuxPhoneNumber'
+import RuxOtp from 'src/ReturnUserExperience/RuxOtp'
+import RuxList from 'src/ReturnUserExperience/RuxList'
 
 import { Stack } from '@mui/material'
 import { Icon } from '@mxenabled/mxui'
@@ -57,6 +59,17 @@ export const ReturnUserExperience = React.forwardRef(() => {
           userEnteredPhone={userEnteredPhone}
         />
       )}
+
+      {view === RUXViews.PHONE_NUMBER && (
+        <RuxPhoneNumber
+          setUserEnteredPhone={setUserEnteredPhone}
+          userEnteredPhone={userEnteredPhone}
+        />
+      )}
+
+      {view === RUXViews.OTP && <RuxOtp />}
+
+      {view === RUXViews.LIST && <RuxList />}
     </div>
   )
 })

src/ReturnUserExperience/RuxList.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import Stack from '@mui/material/Stack'
+import { Text } from '@mxenabled/mxui'
+import { Icon } from '@mxenabled/mxui'
+import Button from '@mui/material/Button'
+
+import { __ } from 'src/utilities/Intl'
+import styles from './returnUserExperience.module.css'
+
+export const RuxList = () => {
+  return (
+    <>
+      <Text variant="h2">{__('Select your institution')}</Text>
+      <Text variant="subtitle1">
+        {__('Choose a previously connected institution or add a new one.')}
+      </Text>
+
+      {/* Connections list goes here */}
+      <p>Connections list goes here</p>
+
+      <Stack className={styles.buttonContainer} spacing="8px">
+        <Button variant="outlined">
+          <Icon name="plus" /> {__('Connect new institution')}
+        </Button>
+        <Text variant="subtitle2">
+          {__('Disconnect accounts from MX anytime by contacting support.')}
+        </Text>
+      </Stack>
+    </>
+  )
+}
+
+export default RuxList

src/ReturnUserExperience/RuxOtp.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Stack from '@mui/material/Stack'
+import { Text } from '@mxenabled/mxui'
+import Button from '@mui/material/Button'
+
+import { __ } from 'src/utilities/Intl'
+import styles from './returnUserExperience.module.css'
+
+export const RuxPhoneNumber = () => {
+  return (
+    <>
+      {/* OTP Style Input */}
+      OTP Style Input
+      <Stack className={styles.buttonContainer} spacing="8px">
+        <Button>{__('Get code')}</Button>
+        <Text variant="subtitle2">Resend code in (10 seconds)</Text>
+      </Stack>
+    </>
+  )
+}
+
+export default RuxPhoneNumber

src/ReturnUserExperience/returnUserExperience.module.css

@@ -73,4 +73,4 @@
   padding-top: 16px;
   padding-right: 16px;
   padding-left: 16px;
-}
+}