refactor: create a reusable shared modal for delegate validation

Expensify · Sep 29, 2024 · 92a43b5 · 92a43b5
1 parent 0ea996a
commit 92a43b5
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 32 deletions.
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
@@ -144,10 +144,6 @@ const ROUTES = {
         route: 'settings/security/delegate/:login/role/:role/confirm',
         getRoute: (login: string, role: string) => `settings/security/delegate/${encodeURIComponent(login)}/role/${role}/confirm` as const,
     },
-    SETTINGS_DELEGATE_MAGIC_CODE: {
-        route: 'settings/security/delegate/:login/role/:role/magic-code',
-        getRoute: (login: string, role: string) => `settings/security/delegate/${encodeURIComponent(login)}/role/${role}/magic-code` as const,
-    },
     SETTINGS_ABOUT: 'settings/about',
     SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links',
     SETTINGS_WALLET: 'settings/wallet',

diff --git a/src/SCREENS.ts b/src/SCREENS.ts
@@ -132,7 +132,6 @@ const SCREENS = {
             ADD_DELEGATE: 'Settings_Delegate_Add',
             DELEGATE_ROLE: 'Settings_Delegate_Role',
             DELEGATE_CONFIRM: 'Settings_Delegate_Confirm',
-            DELEGATE_MAGIC_CODE: 'Settings_Delegate_Magic_Code',
         },
     },
     SAVE_THE_WORLD: {

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -478,7 +478,6 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.DELEGATE.ADD_DELEGATE]: () => require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/AddDelegatePage').default,
     [SCREENS.SETTINGS.DELEGATE.DELEGATE_ROLE]: () => require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/SelectDelegateRolePage').default,
     [SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM]: () => require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/ConfirmDelegatePage').default,
-    [SCREENS.SETTINGS.DELEGATE.DELEGATE_MAGIC_CODE]: () => require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/DelegateMagicCodePage').default,
     [SCREENS.WORKSPACE.RULES_CUSTOM_NAME]: () => require<ReactComponentModule>('../../../../pages/workspace/rules/RulesCustomNamePage').default,
     [SCREENS.WORKSPACE.RULES_AUTO_APPROVE_REPORTS_UNDER]: () => require<ReactComponentModule>('../../../../pages/workspace/rules/RulesAutoApproveReportsUnderPage').default,
     [SCREENS.WORKSPACE.RULES_RANDOM_REPORT_AUDIT]: () => require<ReactComponentModule>('../../../../pages/workspace/rules/RulesRandomReportAuditPage').default,

diff --git a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts
@@ -43,7 +43,6 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
         SCREENS.SETTINGS.DELEGATE.ADD_DELEGATE,
         SCREENS.SETTINGS.DELEGATE.DELEGATE_ROLE,
         SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM,
-        SCREENS.SETTINGS.DELEGATE.DELEGATE_MAGIC_CODE,
     ],
     [SCREENS.SETTINGS.ABOUT]: [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS],
     [SCREENS.SETTINGS.SAVE_THE_WORLD]: [SCREENS.I_KNOW_A_TEACHER, SCREENS.INTRO_SCHOOL_PRINCIPAL, SCREENS.I_AM_A_TEACHER],

diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
@@ -293,12 +293,6 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                                 login: (login: string) => decodeURIComponent(login),
                             },
                         },
-                        [SCREENS.SETTINGS.DELEGATE.DELEGATE_MAGIC_CODE]: {
-                            path: ROUTES.SETTINGS_DELEGATE_MAGIC_CODE.route,
-                            parse: {
-                                login: (login: string) => decodeURIComponent(login),
-                            },
-                        },
                         [SCREENS.SETTINGS.PROFILE.STATUS]: {
                             path: ROUTES.SETTINGS_STATUS,
                             exact: true,

diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
@@ -680,10 +680,6 @@ type SettingsNavigatorParamList = {
         login: string;
         role: string;
     };
-    [SCREENS.SETTINGS.DELEGATE.DELEGATE_MAGIC_CODE]: {
-        login: string;
-        role: string;
-    };
     [SCREENS.SETTINGS.REPORT_CARD_LOST_OR_DAMAGED]: {
         /** cardID of selected card */
         cardID: string;

diff --git a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx
@@ -1,5 +1,5 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import type {ValueOf} from 'type-fest';
 import Button from '@components/Button';
 import HeaderPageLayout from '@components/HeaderPageLayout';
@@ -17,6 +17,13 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
+import ValidateCodeActionModal from "@components/ValidateCodeActionModal";
+import { useOnyx } from "react-native-onyx";
+import ONYXKEYS from "@src/ONYXKEYS";
+import * as ErrorUtils from '@libs/ErrorUtils';
+import * as Delegate from '@userActions/Delegate';
+import * as User from '@libs/actions/User';
+import DelegateMagicCodeModal from "@pages/settings/Security/AddDelegate/DelegateMagicCodeModal";
 
 type ConfirmDelegatePageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM>;
 
@@ -28,8 +35,9 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
     const role = route.params.role as ValueOf<typeof CONST.DELEGATE_ROLE>;
     const {isOffline} = useNetwork();
 
-    const personalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(login);
+    const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(false);
 
+    const personalDetails = PersonalDetailsUtils.getPersonalDetailByEmail(login);
     const avatarIcon = personalDetails?.avatar ?? FallbackAvatar;
     const formattedLogin = formatPhoneNumber(login ?? '');
     const displayName = personalDetails?.displayName ?? formattedLogin;
@@ -42,7 +50,7 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
             text={translate('delegate.addCopilot')}
             style={styles.mt6}
             pressOnEnter
-            onPress={() => Navigation.navigate(ROUTES.SETTINGS_DELEGATE_MAGIC_CODE.getRoute(login, role))}
+            onPress={() => setIsValidateCodeActionModalVisible(true)}
         />
     );
 
@@ -70,6 +78,14 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_DELEGATE_ROLE.getRoute(login, role))}
                 shouldShowRightIcon
             />
+
+            {isValidateCodeActionModalVisible && (
+                <DelegateMagicCodeModal
+                    login={login}
+                    role={role}
+                />
+            )}
+
         </HeaderPageLayout>
     );
 }

diff --git a/...ity/AddDelegate/DelegateMagicCodePage.tsx → ...ty/AddDelegate/DelegateMagicCodeModal.tsx b/...ity/AddDelegate/DelegateMagicCodePage.tsx → ...ty/AddDelegate/DelegateMagicCodeModal.tsx
@@ -1,4 +1,3 @@
-import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect, useState} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
@@ -7,23 +6,21 @@ import useLocalize from '@hooks/useLocalize';
 import * as User from '@libs/actions/User';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
 import * as Delegate from '@userActions/Delegate';
 import type CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type SCREENS from '@src/SCREENS';
 
-type DelegateMagicCodePageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM>;
+type DelegateMagicCodeModalProps = {
+    login: string,
+    role: ValueOf<typeof CONST.DELEGATE_ROLE>
+}
 
-function DelegateMagicCodePage({route}: DelegateMagicCodePageProps) {
+function DelegateMagicCodeModal({login, role}: DelegateMagicCodeModalProps) {
     const {translate} = useLocalize();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(true);
 
-    const login = route.params.login;
-    const role = route.params.role as ValueOf<typeof CONST.DELEGATE_ROLE>;
-
     const currentDelegate = account?.delegatedAccess?.delegates?.find((d) => d.email === login);
     const validateLoginError = ErrorUtils.getLatestErrorField(currentDelegate, 'addDelegate');
 
@@ -62,6 +59,6 @@ function DelegateMagicCodePage({route}: DelegateMagicCodePageProps) {
     );
 }
 
-DelegateMagicCodePage.displayName = 'DelegateMagicCodePage';
+DelegateMagicCodeModal.displayName = 'DelegateMagicCodeModal';
 
-export default DelegateMagicCodePage;
+export default DelegateMagicCodeModal;
diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react';
+import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -30,6 +30,13 @@ import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import DelegateMagicCodeModal from "@pages/settings/Security/AddDelegate/DelegateMagicCodeModal";
+import { ValueOf } from "type-fest";
+
+type Delegate = {
+    login?: string,
+    role?: ValueOf<typeof CONST.DELEGATE_ROLE>,
+}
 
 function SecuritySettingsPage() {
     const styles = useThemeStyles();
@@ -39,6 +46,9 @@ function SecuritySettingsPage() {
     const theme = useTheme();
     const {canUseNewDotCopilot} = usePermissions();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
+
+    const [selectedDelegate, setSelectedDelegate] = useState<Delegate>({});
+
     const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false;
 
     const delegates = account?.delegatedAccess?.delegates ?? [];
@@ -87,7 +97,8 @@ function SecuritySettingsPage() {
                     Navigation.navigate(ROUTES.SETTINGS_DELEGATE_ROLE.getRoute(email));
                     return;
                 }
-                Navigation.navigate(ROUTES.SETTINGS_DELEGATE_MAGIC_CODE.getRoute(email, role));
+
+                setSelectedDelegate({login: email, role});
             };
 
             const formattedEmail = formatPhoneNumber(email);
@@ -206,6 +217,12 @@ function SecuritySettingsPage() {
                             )}
                         </View>
                     </ScrollView>
+                    {(selectedDelegate.login && selectedDelegate.role) && (
+                        <DelegateMagicCodeModal
+                            login={selectedDelegate?.login}
+                            role={selectedDelegate?.role}
+                        />
+                    )}
                 </>
             )}
         </ScreenWrapper>