fix:blank page appears in validate code form page #55588
+155
−38
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import React, {forwardRef, useEffect, useRef, useState} from 'react'; | ||
| import type {ForwardedRef} from 'react'; | ||
| import {InteractionManager, View} from 'react-native'; | ||
| import {useOnyx} from 'react-native-onyx'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import Text from './Text'; | ||
| import type {ValidateCodeActionModalProps} from './ValidateCodeActionModal/type'; | ||
| import ValidateCodeForm from './ValidateCodeActionModal/ValidateCodeForm'; | ||
| import type {ValidateCodeFormHandle} from './ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm'; | ||
|
|
||
| type ValidateCodeActionFormProps = { | ||
| /** Ref for validate code form */ | ||
| forwardedRef: ForwardedRef<ValidateCodeFormHandle>; | ||
| }; | ||
|
|
||
| type ValidateCodeActionProps = ValidateCodeActionModalProps & ValidateCodeActionFormProps; | ||
|
|
||
| function ValidateCodeActionForm({ | ||
| isVisible, | ||
| descriptionPrimary, | ||
| descriptionSecondary, | ||
| validatePendingAction, | ||
| validateError, | ||
| handleSubmitForm, | ||
| clearError, | ||
| sendValidateCode, | ||
| hasMagicCodeBeenSent, | ||
| isLoading, | ||
| forwardedRef, | ||
| }: ValidateCodeActionProps) { | ||
| const themeStyles = useThemeStyles(); | ||
| const firstRenderRef = useRef(true); | ||
|
|
||
| const [validateCodeAction] = useOnyx(ONYXKEYS.VALIDATE_ACTION_CODE); | ||
|
|
||
| const [canSendHasMagicCodeBeenSent, setCanSendHasMagicCodeBeenSent] = useState(false); | ||
|
|
||
| useEffect( | ||
| () => () => { | ||
| firstRenderRef.current = true; | ||
| }, | ||
| [], | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (!firstRenderRef.current || !isVisible || hasMagicCodeBeenSent) { | ||
| return () => { | ||
| clearError(); | ||
| }; | ||
| } | ||
| firstRenderRef.current = false; | ||
| sendValidateCode(); | ||
| if (hasMagicCodeBeenSent) { | ||
| InteractionManager.runAfterInteractions(() => { | ||
| setCanSendHasMagicCodeBeenSent(true); | ||
| }); | ||
| } | ||
| }, [isVisible, sendValidateCode, hasMagicCodeBeenSent, clearError]); | ||
|
|
||
| if (isVisible) { | ||
| return ( | ||
| <View style={[themeStyles.ph5, themeStyles.mt3, themeStyles.mb5, themeStyles.flex1]}> | ||
| <Text style={[themeStyles.mb3]}>{descriptionPrimary}</Text> | ||
| {!!descriptionSecondary && <Text style={[themeStyles.mb3]}>{descriptionSecondary}</Text>} | ||
| <ValidateCodeForm | ||
| isLoading={isLoading} | ||
| validateCodeAction={validateCodeAction} | ||
| validatePendingAction={validatePendingAction} | ||
| validateError={validateError} | ||
| handleSubmitForm={handleSubmitForm} | ||
| sendValidateCode={sendValidateCode} | ||
| clearError={clearError} | ||
| buttonStyles={[themeStyles.justifyContentEnd, themeStyles.flex1]} | ||
| ref={forwardedRef} | ||
| hasMagicCodeBeenSent={canSendHasMagicCodeBeenSent} | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| ValidateCodeActionForm.displayName = 'ValidateCodeActionForm'; | ||
|
|
||
| export default forwardRef<ValidateCodeFormHandle, ValidateCodeActionProps>((props, ref) => ( | ||
| <ValidateCodeActionForm | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...props} | ||
| forwardedRef={ref} | ||
| /> | ||
| )); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -13,12 +13,12 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback'; | |||||
| import ScreenWrapper from '@components/ScreenWrapper'; | ||||||
| import ScrollView from '@components/ScrollView'; | ||||||
| import Text from '@components/Text'; | ||||||
| import ValidateCodeActionForm from '@components/ValidateCodeActionForm'; | ||||||
| import useLocalize from '@hooks/useLocalize'; | ||||||
| import usePrevious from '@hooks/usePrevious'; | ||||||
| import useTheme from '@hooks/useTheme'; | ||||||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||||||
| import useWindowDimensions from '@hooks/useWindowDimensions'; | ||||||
| import blurActiveElement from '@libs/Accessibility/blurActiveElement'; | ||||||
| import { | ||||||
| clearContactMethod, | ||||||
|
|
@@ -30,6 +30,7 @@ import { | |||||
| setContactMethodAsDefault, | ||||||
| validateSecondaryLogin, | ||||||
| } from '@libs/actions/User'; | ||||||
| import {isMobileSafari} from '@libs/Browser'; | ||||||
| import {canUseTouchScreen} from '@libs/DeviceCapabilities'; | ||||||
| import {getEarliestErrorField, getLatestErrorField} from '@libs/ErrorUtils'; | ||||||
| import Navigation from '@libs/Navigation/Navigation'; | ||||||
|
|
@@ -54,13 +55,14 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) { | |||||
| const [myDomainSecurityGroups, myDomainSecurityGroupsResult] = useOnyx(ONYXKEYS.MY_DOMAIN_SECURITY_GROUPS); | ||||||
| const [securityGroups, securityGroupsResult] = useOnyx(ONYXKEYS.COLLECTION.SECURITY_GROUP); | ||||||
| const [isLoadingReportData, isLoadingReportDataResult] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true}); | ||||||
| const [isValidateCodeFormVisible, setIsValidateCodeFormVisible] = useState(true); | ||||||
|
|
||||||
| const isLoadingOnyxValues = isLoadingOnyxValue(loginListResult, sessionResult, myDomainSecurityGroupsResult, securityGroupsResult, isLoadingReportDataResult); | ||||||
|
|
||||||
| const {formatPhoneNumber, translate} = useLocalize(); | ||||||
| const theme = useTheme(); | ||||||
| const themeStyles = useThemeStyles(); | ||||||
| const {windowWidth} = useWindowDimensions(); | ||||||
|
|
||||||
| const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); | ||||||
| const validateCodeFormRef = useRef<ValidateCodeFormHandle>(null); | ||||||
|
|
@@ -160,10 +162,8 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) { | |||||
| Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo)); | ||||||
| }, [prevValidatedDate, loginData?.validatedDate, isDefaultContactMethod, backTo, loginData]); | ||||||
|
|
||||||
| useEffect(() => { | ||||||
| setIsValidateCodeFormVisible(!loginData?.validatedDate); | ||||||
| }, [loginData?.validatedDate, loginData?.errorFields?.addedLogin]); | ||||||
|
|
||||||
| useEffect(() => { | ||||||
|
|
@@ -172,15 +172,15 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) { | |||||
|
|
||||||
| const getThreeDotsMenuItems = useCallback(() => { | ||||||
| const menuItems = []; | ||||||
| if (isValidateCodeFormVisible && !isDefaultContactMethod) { | ||||||
| menuItems.push({ | ||||||
| icon: Trashcan, | ||||||
| text: translate('common.remove'), | ||||||
| onSelected: () => close(() => toggleDeleteModal(true)), | ||||||
| }); | ||||||
| } | ||||||
| return menuItems; | ||||||
| }, [isValidateCodeFormVisible, translate, toggleDeleteModal, isDefaultContactMethod]); | ||||||
|
|
||||||
| if (isLoadingOnyxValues || (isLoadingReportData && isEmptyObject(loginList))) { | ||||||
| return <FullscreenLoadingIndicator />; | ||||||
|
|
@@ -262,20 +262,50 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) { | |||||
| /> | ||||||
| </OfflineWithFeedback> | ||||||
| )} | ||||||
| </> | ||||||
| ); | ||||||
|
|
||||||
| return ( | ||||||
| <ScreenWrapper | ||||||
| onEntryTransitionEnd={() => validateCodeFormRef.current?.focus?.()} | ||||||
| testID={ContactMethodDetailsPage.displayName} | ||||||
| focusTrapSettings={{ | ||||||
| focusTrapOptions: isMobileSafari() | ||||||
| ? undefined | ||||||
| : { | ||||||
| // It is added because input form's focusing bothers transition animation: | ||||||
| // https://github.com/Expensify/App/issues/53884#issuecomment-2594568960 | ||||||
| checkCanFocusTrap: (trapContainers: Array<HTMLElement | SVGElement>) => { | ||||||
| return new Promise((resolve) => { | ||||||
| const interval = setInterval(() => { | ||||||
| const trapContainer = trapContainers.at(0); | ||||||
| if (!trapContainer || (trapContainer && getComputedStyle(trapContainer).visibility !== 'hidden')) { | ||||||
| resolve(); | ||||||
| clearInterval(interval); | ||||||
| } | ||||||
| }, 5); | ||||||
| }); | ||||||
| }, | ||||||
| }, | ||||||
| }} | ||||||
| > | ||||||
| <HeaderWithBackButton | ||||||
| title={formattedContactMethod} | ||||||
| threeDotsMenuItems={getThreeDotsMenuItems()} | ||||||
| shouldShowThreeDotsButton={getThreeDotsMenuItems().length > 0} | ||||||
| shouldOverlayDots | ||||||
| threeDotsAnchorPosition={themeStyles.threeDotsPopoverOffset(windowWidth)} | ||||||
| onThreeDotsButtonPress={() => { | ||||||
| // Hide the keyboard when the user clicks the three-dot menu. | ||||||
| // Use blurActiveElement() for mWeb and KeyboardUtils.dismiss() for native apps. | ||||||
| blurActiveElement(); | ||||||
| KeyboardUtils.dismiss(); | ||||||
| }} | ||||||
| /> | ||||||
| <ScrollView | ||||||
| keyboardShouldPersistTaps="handled" | ||||||
| contentContainerStyle={themeStyles.flex1} | ||||||
|
There was a problem hiding this comment. can you elaborate why do we need this style? There was a problem hiding this comment. This style makes put "Verify" button to bottom. W/o the style the button will be placed beneath validate code form. There was a problem hiding this comment. ping @jacobkim9881 again ^ There was a problem hiding this comment. The elements can fit the necessary space. The explain, form and button elements are placed in its position with this style. |
||||||
| > | ||||||
| {isFailedAddContactMethod && ( | ||||||
| <ErrorMessageRow | ||||||
| errors={getLatestErrorField(loginData, 'addedLogin')} | ||||||
|
|
@@ -289,32 +319,20 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) { | |||||
| /> | ||||||
| )} | ||||||
|
|
||||||
| <ValidateCodeActionForm | ||||||
|
There was a problem hiding this comment.
Suggested change
Why don't we display/hide There was a problem hiding this comment. We have used |
||||||
| hasMagicCodeBeenSent={hasMagicCodeBeenSent} | ||||||
| isVisible={isValidateCodeFormVisible && !loginData.validatedDate && !!loginData} | ||||||
| validatePendingAction={loginData.pendingFields?.validateCodeSent} | ||||||
| handleSubmitForm={(validateCode) => validateSecondaryLogin(loginList, contactMethod, validateCode)} | ||||||
| validateError={!isEmptyObject(validateLoginError) ? validateLoginError : getLatestErrorField(loginData, 'validateCodeSent')} | ||||||
| clearError={() => clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')} | ||||||
| sendValidateCode={() => requestContactMethodValidateCode(contactMethod)} | ||||||
| descriptionPrimary={translate('contacts.enterMagicCode', {contactMethod: formattedContactMethod})} | ||||||
| forwardedRef={validateCodeFormRef} | ||||||
| /> | ||||||
|
|
||||||
| {!isValidateCodeFormVisible && !!loginData.validatedDate && getMenuItems()} | ||||||
| {getDeleteConfirmationModal()} | ||||||
| </ScrollView> | ||||||
| </ScreenWrapper> | ||||||
| ); | ||||||
|
|
||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jacobkim9881 will it cause any issue if we apply it for mweb Safari too?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It bothers keyboard showing on mWeb Safari:
REC-20250205094156.mp4
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
On mWeb Safari, number pad shows at contact method page. It is because of
onActiveevent fired by focus trap. Number pad gets ready for putting numbers on the validate form. On the screen, contact method page is seen still but focusing is on validate form. As a result before transition animation shows, number pad shows earlier.