feat: update RuxPhoneNumber and ReturnUserExperience components for improved layout and analytics tracking

Author: Jameson13B

src/ReturnUserExperience/ReturnUserExperience.tsx

@@ -32,10 +32,14 @@ export const ReturnUserExperience = React.forwardRef(() => {
     <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>

src/ReturnUserExperience/RuxPhoneNumber.tsx

@@ -1,15 +1,16 @@
 import React from 'react'
-import { useSelector } from 'react-redux'
 
+import { useTheme } from '@mui/material'
 import InputAdornment from '@mui/material/InputAdornment'
 import Stack from '@mui/material/Stack'
 import Button from '@mui/material/Button'
 import { Text } from '@mxenabled/mxui'
 import { Link } from '@mui/material'
 
-import { RootState } from 'src/redux/Store'
 import { __ } from 'src/utilities/Intl'
+import useAnalyticsPath from 'src/hooks/useAnalyticsPath'
 import { TextField } from 'src/privacy/input'
+import { PageviewInfo } from 'src/const/Analytics'
 import styles from './returnUserExperience.module.css'
 
 export const RuxPhoneNumber = ({
@@ -19,21 +20,27 @@ export const RuxPhoneNumber = ({
   userEnteredPhone: string
   setUserEnteredPhone: (phone: string) => void
 }) => {
-  const appName = useSelector(
-    (state: RootState) => state.profiles.client.oauth_app_name || 'This app',
-  )
+  useAnalyticsPath(...PageviewInfo.CONNECT_RUX_PHONE_NUMBER)
+  const { palette } = useTheme()
 
   return (
     <>
       <Stack className={styles.titleContainer} spacing="6px">
         <Text bold={true} className={styles.centerText} truncate={false} variant="h2">
-          {__('Connect your accounts')}
+          {__('Connect faster with your phone number')}
         </Text>
         <Text className={styles.centerText} truncate={false} variant="subtitle1">
-          {__('%1 uses MX to connect your accounts.', appName)}
+          {__('Login or sign up with MX to securely access your saved accounts. ')}
           <Link
+            className={styles.primaryLink}
             href="https://mx.com/learn-more"
-            sx={{ color: 'tokens.TextColor.ButtonLink', marginLeft: 0 }}
+            sx={{
+              color: palette.primary.main,
+              fontWeight: 'normal',
+              marginLeft: 0,
+              textDecoration: 'underline',
+            }}
+            target="_blank"
             underline="always"
             variant="subtitle1"
           >
@@ -46,34 +53,58 @@ export const RuxPhoneNumber = ({
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
-              <div>
-                <Text variant="body1">Phone</Text>
-                <Text bold={true} variant="h2">
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <Text style={{ paddingLeft: '10px', paddingRight: '16px' }} variant="body1">
+                  Phone
+                </Text>
+                <Text sx={{ fontWeight: 400 }} variant="h2">
                   +1
                 </Text>
               </div>
             </InputAdornment>
           ),
+          style: {
+            paddingRight: '14px',
+            margin: '40px 0',
+            fontSize: '23px',
+            fontWeight: '400',
+            height: 'auto',
+            maxHeight: '60px',
+          },
         }}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setUserEnteredPhone(e.target.value)}
+        fullWidth={true}
+        name="phoneNumber"
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+          setUserEnteredPhone(e.target.value.replace(/\D/g, '').slice(0, 10))
+        }
         required={true}
-        value={userEnteredPhone}
+        value={formatPhone(userEnteredPhone)}
       />
 
-      <Stack className={styles.buttonContainer} spacing="8px">
-        <Text variant="caption">
+      <Stack spacing="8px">
+        <Text truncate={false} variant="caption">
           {/* --TR: Full string 'By selecting "Get code", you agree to MX's Terms & Conditions' */}
-          {__('By selecting "Get code", you agree to')}
-          <Link href="https://www.mx.com/terms/" variant="caption">
+          {__('By selecting "Continue", you agree to ')}
+          <Link
+            href="https://www.mx.com/terms/"
+            sx={{
+              fontWeight: 'normal',
+              marginLeft: 0,
+              marginRight: 0,
+              textDecoration: 'underline',
+            }}
+            target="_blank"
+            underline="always"
+            variant="caption"
+          >
             {/* TODO: Do we translate this below? */}
             {__("MX's Terms & Conditions")}
           </Link>
-          .
         </Text>
-        <Button fullWidth={true} onClick={() => {}}>
+        <Button onClick={() => {}} variant="contained">
           {__('Continue')}
         </Button>
-        <Button fullWidth={true} onClick={() => {}} variant="outlined">
+        <Button onClick={() => {}} variant="text">
           {__('Continue without phone number')}
         </Button>
       </Stack>
@@ -82,3 +113,12 @@ export const RuxPhoneNumber = ({
 }
 
 export default RuxPhoneNumber
+
+const formatPhone = (value: string) => {
+  const digits = value.replace(/\D/g, '').slice(0, 10)
+
+  if (digits.length === 0) return digits
+  if (digits.length <= 3) return `(${digits}`
+  if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`
+  return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)} - ${digits.slice(6)}`
+}

src/ReturnUserExperience/returnUserExperience.module.css

@@ -71,6 +71,6 @@
 
 .titleContainer {
   padding-top: 16px;
-  padding-right: 16px;
-  padding-left: 16px;
+  margin-right: -8px;
+  margin-left: -8px;
 }

src/const/Analytics.js

@@ -117,6 +117,7 @@ export const PageviewInfo = {
   CONNECT_OAUTH_ERROR: ['Connect Oauth Error', '/oauth_error'],
   CONNECT_NO_ELIGIBLE_ACCOUNTS: ['Connect No Eligible Accounts', '/no_eligible_accounts'],
   CONNECT_RUX_INFO: ['Connect RUX Info', '/rux_info'],
+  CONNECT_RUX_PHONE_NUMBER: ['Connect RUX Phone Number', '/rux_phone_number'],
   CONNECT_SEARCH: ['Connect Search', '/search'],
   CONNECT_SEARCH_FAILED: ['Connect Search Failed', '/search_failed'],
   CONNECT_SEARCH_NO_RESULTS: ['Connect Search No Results', '/no_results'],