Merge pull request #48047 from wildan-m/wildan/fix/43359-validation-c…

…ode-not-send-onPress-solution Fix validation code not sending on initial page load.
Expensify · Sep 16, 2024 · 19d037b · 19d037b
2 parents b00b9bc + 5642419
commit 19d037b
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 12 deletions.
diff --git 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) {
                 <TextLink
                     fontSize={variables.fontSizeLabel}
                     onPress={() => {
-                        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
@@ -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
@@ -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
@@ -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
                 <MenuItem
                     title={menuItemTitle}
                     description={description}
-                    onPress={() => 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
@@ -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<NodeJS.Timeout | null>(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({
                     >
                         <Text style={[StyleUtils.getDisabledLinkStyles(shouldDisableResendValidateCode)]}>{translate('validateCodeForm.magicCodeNotReceived')}</Text>
                     </PressableWithFeedback>
-                    {(hasMagicCodeBeenSent ?? !!pendingContact?.validateCodeSent) && (
+                    {showDotIndicator && (
                         <DotIndicatorMessage
                             type="success"
                             style={[styles.mt6, styles.flex0]}