feat: add RuxPhoneNumber component for phone number input in ReturnUserExperience

Author: Jameson13B

src/ReturnUserExperience/ReturnUserExperience.tsx

@@ -5,6 +5,7 @@ import RuxLogosHeader from 'src/ReturnUserExperience/RuxLogosHeader'
 import RuxTitle from 'src/ReturnUserExperience/RuxTitle'
 import RuxInfo from 'src/ReturnUserExperience/RuxInfo'
 import { RuxPhoneNumber } from 'src/ReturnUserExperience/RuxPhoneNumber'
+import RuxOtp from 'src/ReturnUserExperience/RuxOtp'
 
 import { __ } from 'src/utilities/Intl'
 
@@ -34,6 +35,10 @@ export const ReturnUserExperience = () => {
           userEnteredPhone={userEnteredPhone}
         />
       )}
+
+      {view === RUXViews.OTP && <RuxOtp />}
+
+      {view === RUXViews.LIST && <div>{__('List of connections goes here.')}</div>}
     </div>
   )
 }

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