feat: integrate phone number handling in RuxPhoneNumber component

Author: Jameson13B

src/ReturnUserExperience/ReturnUserExperience.tsx

@@ -1,5 +1,5 @@
 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'
@@ -13,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 = {
@@ -26,13 +28,17 @@ 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}>
@@ -56,6 +62,11 @@ export const ReturnUserExperience = React.forwardRef(() => {
 
       {view === RUXViews.PHONE_NUMBER && (
         <RuxPhoneNumber
+          handleContinueWithoutPhone={handleContinueWithoutPhone}
+          handleRuxContinue={() => {
+            // sendAnalyticsEvent(AnalyticEvents.RUX_PHONE_NUMBER_CONTINUE_CLICKED)
+            setView(RUXViews.OTP)
+          }}
           setUserEnteredPhone={setUserEnteredPhone}
           userEnteredPhone={userEnteredPhone}
         />

src/ReturnUserExperience/RuxPhoneNumber.tsx

@@ -14,9 +14,13 @@ import { PageviewInfo } from 'src/const/Analytics'
 import styles from './returnUserExperience.module.css'
 
 export const RuxPhoneNumber = ({
+  handleContinueWithoutPhone,
+  handleRuxContinue,
   userEnteredPhone,
   setUserEnteredPhone,
 }: {
+  handleContinueWithoutPhone: () => void
+  handleRuxContinue: () => void
   userEnteredPhone: string
   setUserEnteredPhone: (phone: string) => void
 }) => {
@@ -101,10 +105,10 @@ export const RuxPhoneNumber = ({
             {__("MX's Terms & Conditions")}
           </Link>
         </Text>
-        <Button onClick={() => {}} variant="contained">
+        <Button onClick={handleRuxContinue} variant="contained">
           {__('Continue')}
         </Button>
-        <Button onClick={() => {}} variant="text">
+        <Button onClick={handleContinueWithoutPhone} variant="text">
           {__('Continue without phone number')}
         </Button>
       </Stack>