Skip to content

fix: unable to receive New Magic Codes for Primary Contact #55498

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

Merged
merged 4 commits into from
Jan 23, 2025
Merged

fix: unable to receive New Magic Codes for Primary Contact #55498

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b4673c8
fix: unable to receive New Magic Codes for Primary Contact
nkdengineer Jan 21, 2025
3a61912
fix lint
nkdengineer Jan 21, 2025
adc61ce
fix lint
nkdengineer Jan 21, 2025
191eeb9
Merge branch 'main' into fix/55405
nkdengineer Jan 23, 2025
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
61 changes: 37 additions & 24 deletions src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import ConfirmModal from '@components/ConfirmModal';
import ErrorMessageRow from '@components/ErrorMessageRow';
import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Expensicons from '@components/Icon/Expensicons';
import {Star, Trashcan} from '@components/Icon/Expensicons';
import MenuItem from '@components/MenuItem';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import ScreenWrapper from '@components/ScreenWrapper';
Expand All @@ -20,14 +20,23 @@ import usePrevious from '@hooks/usePrevious';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import blurActiveElement from '@libs/Accessibility/blurActiveElement';
import {
clearContactMethod,
clearContactMethodErrors,
clearUnvalidatedNewContactMethodAction,
deleteContactMethod,
requestContactMethodValidateCode,
resetContactMethodValidateCodeSentState,
setContactMethodAsDefault,
validateSecondaryLogin,
} from '@libs/actions/User';
import {canUseTouchScreen} from '@libs/DeviceCapabilities';
import * as ErrorUtils from '@libs/ErrorUtils';
import {getEarliestErrorField, getLatestErrorField} from '@libs/ErrorUtils';
import Navigation from '@libs/Navigation/Navigation';
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
import {addSMSDomainIfPhoneNumber} from '@libs/PhoneNumber';
import * as Modal from '@userActions/Modal';
import * as User from '@userActions/User';
import {close} from '@userActions/Modal';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
Expand Down Expand Up @@ -80,13 +89,13 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
}, [route.params.contactMethod]);
const loginData = useMemo(() => loginList?.[contactMethod], [loginList, contactMethod]);
const isDefaultContactMethod = useMemo(() => session?.email === loginData?.partnerUserID, [session?.email, loginData?.partnerUserID]);
const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin');
const validateLoginError = getEarliestErrorField(loginData, 'validateLogin');

/**
* Attempt to set this contact method as user's "Default contact method"
*/
const setAsDefault = useCallback(() => {
User.setContactMethodAsDefault(contactMethod, backTo);
setContactMethodAsDefault(contactMethod, backTo);
}, [contactMethod, backTo]);

/**
Expand Down Expand Up @@ -136,7 +145,7 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
*/
const confirmDeleteAndHideModal = useCallback(() => {
toggleDeleteModal(false);
User.deleteContactMethod(contactMethod, loginList ?? {}, backTo);
deleteContactMethod(contactMethod, loginList ?? {}, backTo);
}, [contactMethod, loginList, toggleDeleteModal, backTo]);

const prevValidatedDate = usePrevious(loginData?.validatedDate);
Expand All @@ -157,13 +166,17 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
setIsValidateCodeActionModalVisible(!loginData?.validatedDate);
}, [loginData?.validatedDate, loginData?.errorFields?.addedLogin]);

useEffect(() => {
resetContactMethodValidateCodeSentState(contactMethod);
}, [contactMethod]);
Comment on lines +169 to +171
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This caused the loginData.validatedDate to briefly turn undefined even if the user is actually verified. This triggered the above navigation effect which made it impossible to enter this page. #56355

We should have called resetContactMethodValidateCodeSentState only for non verified contacts.

Comment on lines +169 to +171
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Coming from #57870, when the contact method is removed, this hook will be triggered causing an RBR; we should avoid this call whenever the contact method has a pending delete action.


const getThreeDotsMenuItems = useCallback(() => {
const menuItems = [];
if (isValidateCodeActionModalVisible && !isDefaultContactMethod) {
menuItems.push({
icon: Expensicons.Trashcan,
icon: Trashcan,
text: translate('common.remove'),
onSelected: () => Modal.close(() => toggleDeleteModal(true)),
onSelected: () => close(() => toggleDeleteModal(true)),
});
}
return menuItems;
Expand Down Expand Up @@ -214,36 +227,36 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
<>
{canChangeDefaultContactMethod ? (
<OfflineWithFeedback
errors={ErrorUtils.getLatestErrorField(loginData, 'defaultLogin')}
errors={getLatestErrorField(loginData, 'defaultLogin')}
errorRowStyles={[themeStyles.ml8, themeStyles.mr5]}
onClose={() => User.clearContactMethodErrors(contactMethod, 'defaultLogin')}
onClose={() => clearContactMethodErrors(contactMethod, 'defaultLogin')}
>
<MenuItem
title={translate('contacts.setAsDefault')}
icon={Expensicons.Star}
icon={Star}
onPress={setAsDefault}
/>
</OfflineWithFeedback>
) : null}
{isDefaultContactMethod ? (
<OfflineWithFeedback
pendingAction={loginData.pendingFields?.defaultLogin}
errors={ErrorUtils.getLatestErrorField(loginData, isFailedRemovedContactMethod ? 'deletedLogin' : 'defaultLogin')}
errors={getLatestErrorField(loginData, isFailedRemovedContactMethod ? 'deletedLogin' : 'defaultLogin')}
errorRowStyles={[themeStyles.ml8, themeStyles.mr5]}
onClose={() => User.clearContactMethodErrors(contactMethod, isFailedRemovedContactMethod ? 'deletedLogin' : 'defaultLogin')}
onClose={() => clearContactMethodErrors(contactMethod, isFailedRemovedContactMethod ? 'deletedLogin' : 'defaultLogin')}
>
<Text style={[themeStyles.ph5, themeStyles.mv3]}>{translate('contacts.yourDefaultContactMethod')}</Text>
</OfflineWithFeedback>
) : (
<OfflineWithFeedback
pendingAction={loginData.pendingFields?.deletedLogin}
errors={ErrorUtils.getLatestErrorField(loginData, 'deletedLogin')}
errors={getLatestErrorField(loginData, 'deletedLogin')}
errorRowStyles={[themeStyles.mt6, themeStyles.ph5]}
onClose={() => User.clearContactMethodErrors(contactMethod, 'deletedLogin')}
onClose={() => clearContactMethodErrors(contactMethod, 'deletedLogin')}
>
<MenuItem
title={translate('common.remove')}
icon={Expensicons.Trashcan}
icon={Trashcan}
iconFill={theme.danger}
onPress={() => toggleDeleteModal(true)}
/>
Expand All @@ -265,11 +278,11 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
<ScrollView keyboardShouldPersistTaps="handled">
{isFailedAddContactMethod && (
<ErrorMessageRow
errors={ErrorUtils.getLatestErrorField(loginData, 'addedLogin')}
errors={getLatestErrorField(loginData, 'addedLogin')}
errorRowStyles={[themeStyles.mh5, themeStyles.mv3]}
onClose={() => {
User.clearContactMethod(contactMethod);
User.clearUnvalidatedNewContactMethodAction();
clearContactMethod(contactMethod);
clearUnvalidatedNewContactMethodAction();
Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
}}
canDismissError
Expand All @@ -282,14 +295,14 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
hasMagicCodeBeenSent={hasMagicCodeBeenSent}
isVisible={isValidateCodeActionModalVisible && !loginData.validatedDate && !!loginData}
validatePendingAction={loginData.pendingFields?.validateCodeSent}
handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
handleSubmitForm={(validateCode) => validateSecondaryLogin(loginList, contactMethod, validateCode)}
validateError={!isEmptyObject(validateLoginError) ? validateLoginError : getLatestErrorField(loginData, 'validateCodeSent')}
clearError={() => clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
onClose={() => {
Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
setIsValidateCodeActionModalVisible(false);
}}
sendValidateCode={() => User.requestContactMethodValidateCode(contactMethod)}
sendValidateCode={() => requestContactMethodValidateCode(contactMethod)}
descriptionPrimary={translate('contacts.enterMagicCode', {contactMethod: formattedContactMethod})}
onThreeDotsButtonPress={() => {
// Hide the keyboard when the user clicks the three-dot menu.
Expand Down
Loading