Edit Personal Details Linking

Baas X PiiOnboarding Modules

Edit Personal Details

This action is in the Baas Menu component on the item Personal Details. It needs to call the ConfirmOnboardingInfoScreen from the PiiOnboarding Module.

The following code describes specifically the interaction:

Code

• Changes in /LinkerStudio/modules/PiiOnboarding/hooks/editProfile/useEditProfile.ts

Import after the last import:

import {CustomerSelectors} from 'LinkerStudio/modules/baas/common/redux/customer/customerSlice';
import {baasUpdateCustomer} from 'LinkerStudio/modules/baas/common/utils/customer/CustomerHelpers';

Replace the line const isLoadingUpdateEditProfile = false; with the following:

const isLoadingUpdateEditProfile = useAppSelector(
    CustomerSelectors.getIsLoadingCustomerData,
);

After the comment /* use useAppSelector for Customer profile data and assign it to this variable */ add the following line:

const customer = useAppSelector(CustomerSelectors.getCustomer);

Replace the first useEffect function with the following:

useEffect(() => {
    //Add here the rest of pre-populated values
    if (isRouteEditProfile) {
      dispatch(reset());
      dispatch(setFirstName(customer.firstName));
      dispatch(setLastName(customer.lastName));
      dispatch(
        setAddress({
          ...customer.address,
          street2: customer.address.street2 ?? '',
        }),
      );
      dispatch(setPhone(customer.phone));
    }
  }, [customer, dispatch, isRouteEditProfile]);

Replace the line console.log('Add redux action to handle send update profilr info: ', pii); with the following

baasUpdateCustomer(dispatch, pii);

• Changes in LinkerStudio/modules/baas/common/navigation/MainStackNavigator.tsx

import {ONBOARDING_SCREENS} from 'LinkerStudio/modules/PiiOnboarding/constants';

Add the last </Stack.Group> like shown below:

 <Stack.Group>
  {ONBOARDING_SCREENS.map(screen => {
    return (
     <Stack.Screen
       key={screen.name}
       name={screen.name}
       component={screen.component}
     />
     );
 })}
</Stack.Group>

• Changes in LinkerStudio/modules/baas/common/navigation/types.ts

Import after the last import

import {OnboardingStackParams} from 'LinkerStudio/modules/PiiOnboarding/navigation/types';

Add in MainStackParams this type

& OnboardingStackParams;

• Changes in LinkerStudio/modules/baas/common/components/organisms/BaasMenu/BaasMenu.tsx

Replace console.info(itemTittle); after case strings.sideMenu.profile: with

navigation.navigate('ConfirmOnboardingInfoScreen', {
            routeType: 'editProfile',
});

PiiOnboarding X MfaVerificationCode Modules

Edit Profile route

When the action of edit profile is triggered in the PiiOnboarding module, it needs to request a verification code using the MfaVerificationCode module.

The following code describes specifically the interaction:

Code

• Changes in src/navigation/types.ts file.

Import required stack params:

import {MfaStackParams} from 'LinkerStudio/modules/MfaVerificationCode/navigation/types';

Add the added stack params to the RootStackParamsList with ampersand '&' and close with a semicolon ';' after OnboardingStackParams

export type RootStackParamsList = ... & MfaStackParams;

• Changes in LinkerStudio/modules/MfaVerificationCode/utils/MfaHelpers.ts

Import the following after the last import

import {replace} from 'src/navigation/RootNavigation';

Add the following code above default: line inside the method handleOnPhoneVerificationCodeSuccess

case 'MFA_EDIT_PROFILE':
  replace('EditOnboardingInfoScreen', {routeType: 'editProfile'});
  break;

• Changes in LinkerStudio/modules/PiiOnboarding/utils/onboarding/OnboardingHelpers.ts

Replace this

/*If mfa module is integrated then add this navigate call:
    navigate('RequestAuthorizationCodeScreen', {
      routeId: CONFIG_VALUES.mfaRoutes.mfa_editProfile,
      phoneNumber,
      phoneNumberCountryCode,
    });
*/

With the following:

navigate('RequestAuthorizationCodeScreen', {
    routeId: CONFIG_VALUES.mfaRoutes.mfa_editProfile,
    phoneNumber,
    phoneNumberCountryCode,
});

Note: the following change is assuming that the authentication module was integrated

• Changes in src/navigation/ProtectedStackNavigator.tsx file:

Import the MFA onboarding screens:

import {MFA_SCREENS} from 'LinkerStudio/modules/MfaVerificationCode/constants';

Add the MFA screens to the stack navigator:

Add right after

{ONBOARDING_SCREENS.map(screen => {
  return (
     <Stack.Screen
          key={screen.name}
          name={screen.name}
          component={screen.component}
     />
  );
})}

The following:

{MFA_SCREENS.map(screen => {
  return (
     <Stack.Screen
          key={screen.name}
          name={screen.name}
          component={screen.component}
     />
  );
})}