diff --git a/src/components/ValidateAccountMessage.tsx b/src/components/ValidateAccountMessage.tsx index be43c2985961..277b113b2351 100644 --- a/src/components/ValidateAccountMessage.tsx +++ b/src/components/ValidateAccountMessage.tsx @@ -7,6 +7,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import variables from '@styles/variables'; import * as Session from '@userActions/Session'; +import * as User from '@userActions/User'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import Icon from './Icon'; @@ -41,7 +42,12 @@ function ValidateAccountMessage({backTo}: ValidateAccountMessageProps) { { - const login = loginList?.[loginNames?.[0]] ?? {}; + const loginName = loginNames?.[0]; + const login = loginList?.[loginName] ?? {}; + if (!login?.validatedDate && !login?.validateCodeSent) { + User.requestContactMethodValidateCode(loginName); + } + Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.getRoute(login?.partnerUserID ?? loginNames?.[0], backTo)); }} > diff --git a/src/libs/actions/User.ts b/src/libs/actions/User.ts index d2513ce74454..2e4fb5c770d0 100644 --- a/src/libs/actions/User.ts +++ b/src/libs/actions/User.ts @@ -412,6 +412,7 @@ function addNewContactMethod(contactMethod: string, validateCode = '') { [contactMethod]: { partnerUserID: contactMethod, validatedDate: '', + validateCodeSent: true, errorFields: { addedLogin: null, }, diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx index ebdbaaf2e500..9fcc28f51912 100644 --- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx +++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx @@ -133,14 +133,6 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) { User.deleteContactMethod(contactMethod, loginList ?? {}, backTo); }, [contactMethod, loginList, toggleDeleteModal, backTo]); - useEffect(() => { - if (isEmptyObject(loginData)) { - return; - } - User.resetContactMethodValidateCodeSentState(contactMethod); - // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - }, []); - const prevValidatedDate = usePrevious(loginData?.validatedDate); useEffect(() => { // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx b/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx index 44c7a9b567cf..3f23b3a802be 100644 --- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx +++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx @@ -17,6 +17,7 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; +import * as User from '@userActions/User'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -80,7 +81,12 @@ function ContactMethodsPage({loginList, session, route}: ContactMethodsPageProps Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.getRoute(partnerUserID, navigateBackTo))} + onPress={() => { + if (!login?.validatedDate && !login?.validateCodeSent) { + User.requestContactMethodValidateCode(loginName); + } + Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.getRoute(partnerUserID, navigateBackTo)); + }} brickRoadIndicator={indicator} shouldShowBasicTitle shouldShowRightIcon diff --git a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx index c77c6e2a0743..6ec1dbc5d67e 100644 --- a/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx +++ b/src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.tsx @@ -88,6 +88,8 @@ function BaseValidateCodeForm({ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- nullish coalescing doesn't achieve the same result in this case const shouldDisableResendValidateCode = !!isOffline || account?.isLoading; const focusTimeoutRef = useRef(null); + const validateCodeSentIsPressedRef = useRef(false); + const [showDotIndicator, setShowDotIndicator] = useState(false); useImperativeHandle(innerRef, () => ({ focus() { @@ -143,6 +145,18 @@ function BaseValidateCodeForm({ inputValidateCodeRef.current?.clear(); }, [hasMagicCodeBeenSent]); + useEffect(() => { + // `validateCodeSent` is updated asynchronously, + // and `validateCodeSentIsPressedRef.current` is updated faster than `hasMagicCodeBeenSent`. + // This can cause the component to hide and show the `DotIndicatorMessage` multiple times + // in quick succession, leading to a flickering effect. + if ((hasMagicCodeBeenSent ?? !!pendingContact?.validateCodeSent) && validateCodeSentIsPressedRef.current) { + setShowDotIndicator(true); + } else { + setShowDotIndicator(false); + } + }, [hasMagicCodeBeenSent, pendingContact, validateCodeSentIsPressedRef]); + /** * Request a validate code / magic code be sent to verify this contact method */ @@ -154,8 +168,8 @@ function BaseValidateCodeForm({ } inputValidateCodeRef.current?.clear(); + validateCodeSentIsPressedRef.current = true; }; - /** * Handle text input and clear formError upon text change */ @@ -227,7 +241,7 @@ function BaseValidateCodeForm({ > {translate('validateCodeForm.magicCodeNotReceived')} - {(hasMagicCodeBeenSent ?? !!pendingContact?.validateCodeSent) && ( + {showDotIndicator && (