Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix validate page navigation #52603

Merged
merged 5 commits into from
Nov 18, 2024
Merged

Fix validate page navigation #52603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6f4b6dc
simplify names
arosiclair Nov 14, 2024
67be3a1
simplify navigation logic
arosiclair Nov 14, 2024
0dca2ad
Make onClose optional
arosiclair Nov 14, 2024
78247d6
remove central pane mapping for VerifyAccountPage
arosiclair Nov 15, 2024
13c92f3
use state to animate modal close and fix onClose callback
arosiclair Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/ValidateCodeActionModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function ValidateCodeActionModal({

const hide = useCallback(() => {
clearError();
onClose();
onClose?.();
arosiclair marked this conversation as resolved.
Show resolved Hide resolved
}, [onClose, clearError]);

useEffect(() => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/ValidateCodeActionModal/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ type ValidateCodeActionModalProps = {
descriptionSecondary?: string | null;

/** Function to call when the user closes the modal */
onClose: () => void;
onClose?: () => void;

/** Function to be called when the modal is closed */
onModalHide?: () => void;
Expand Down
1 change: 0 additions & 1 deletion src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
SCREENS.SETTINGS.WALLET.CARD_ACTIVATE,
SCREENS.SETTINGS.WALLET.REPORT_VIRTUAL_CARD_FRAUD,
SCREENS.SETTINGS.WALLET.CARDS_DIGITAL_DETAILS_UPDATE_ADDRESS,
SCREENS.SETTINGS.WALLET.VERIFY_ACCOUNT,
],
[SCREENS.SETTINGS.SECURITY]: [
SCREENS.SETTINGS.TWO_FACTOR_AUTH,
Expand Down
32 changes: 13 additions & 19 deletions src/pages/settings/Wallet/VerifyAccountPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import Navigation from '@libs/Navigation/Navigation';
import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
import * as User from '@userActions/User';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';

type VerifyAccountPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD>;
Expand All @@ -21,7 +20,6 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) {
const loginData = loginList?.[contactMethod];
const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin');
const [isUserValidated] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.validated});

const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(true);

const navigateBackTo = route?.params?.backTo;
Expand All @@ -39,31 +37,26 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) {
User.clearContactMethodErrors(contactMethod, 'validateLogin');
}, [contactMethod]);

const closeModal = useCallback(() => {
// Disable modal visibility so the navigation is animated
setIsValidateCodeActionModalVisible(false);
Navigation.goBack();
}, []);

// Handle navigation once the user is validated
useEffect(() => {
if (!isUserValidated) {
return;
}

setIsValidateCodeActionModalVisible(false);

if (!navigateBackTo) {
return;
}

Navigation.navigate(navigateBackTo);
}, [isUserValidated, navigateBackTo]);

useEffect(() => {
if (isValidateCodeActionModalVisible) {
return;
}

if (!isUserValidated && navigateBackTo) {
Navigation.navigate(ROUTES.SETTINGS_WALLET);
} else if (!navigateBackTo) {
if (navigateBackTo) {
Navigation.navigate(navigateBackTo);
} else {
Navigation.goBack();
}
}, [isValidateCodeActionModalVisible, isUserValidated, navigateBackTo]);
}, [isUserValidated, navigateBackTo]);

return (
<ValidateCodeActionModal
Expand All @@ -75,8 +68,9 @@ function VerifyAccountPage({route}: VerifyAccountPageProps) {
title={translate('contacts.validateAccount')}
descriptionPrimary={translate('contacts.featureRequiresValidate')}
descriptionSecondary={translate('contacts.enterMagicCode', {contactMethod})}
onClose={() => setIsValidateCodeActionModalVisible(false)}
clearError={clearError}
onClose={closeModal}
onModalHide={() => {}}
/>
);
}
Expand Down
Loading