From e299ff55afe3fe876e9bc2bce6b1044b04fcdc56 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Fri, 19 Jan 2024 20:59:11 +0100 Subject: [PATCH 01/10] replace usages of shouldShowSmallScreen and isInModal props in components --- src/pages/signin/LoginForm/BaseLoginForm.js | 8 ++--- src/pages/signin/SignInHeroImage.js | 10 ++---- src/pages/signin/SignInModal.js | 2 +- src/pages/signin/SignInPage.js | 32 ++++++++----------- src/pages/signin/SignInPageLayout/Footer.js | 9 ++---- .../SignInPageLayout/SignInPageContent.js | 9 +++--- src/pages/signin/SignInPageLayout/index.js | 17 +++------- 7 files changed, 32 insertions(+), 55 deletions(-) diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js index 8fcea461eacd..52c4e31c9418 100644 --- a/src/pages/signin/LoginForm/BaseLoginForm.js +++ b/src/pages/signin/LoginForm/BaseLoginForm.js @@ -17,6 +17,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withToggleVisibilityView from '@components/withToggleVisibilityView'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; import usePrevious from '@hooks/usePrevious'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus'; import compose from '@libs/compose'; @@ -70,9 +71,6 @@ const propTypes = { /** Props to detect online status */ network: networkPropTypes.isRequired, - /** Whether or not the sign in page is being rendered in the RHP modal */ - isInModal: PropTypes.bool, - isVisible: PropTypes.bool.isRequired, ...windowDimensionsPropTypes, @@ -88,7 +86,6 @@ const defaultProps = { closeAccount: {}, blurOnSubmit: false, innerRef: () => {}, - isInModal: false, }; function LoginForm(props) { @@ -100,6 +97,7 @@ function LoginForm(props) { const firstBlurred = useRef(false); const isFocused = useIsFocused(); const isLoading = useRef(false); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const {translate} = props; @@ -213,7 +211,7 @@ function LoginForm(props) { return; } let focusTimeout; - if (props.isInModal) { + if (shouldUseNarrowLayout) { focusTimeout = setTimeout(() => input.current.focus(), CONST.ANIMATED_TRANSITION); } else { input.current.focus(); diff --git a/src/pages/signin/SignInHeroImage.js b/src/pages/signin/SignInHeroImage.js index c665a09932c2..8754ed9c10dd 100644 --- a/src/pages/signin/SignInHeroImage.js +++ b/src/pages/signin/SignInHeroImage.js @@ -3,23 +3,19 @@ import React from 'react'; import Lottie from '@components/Lottie'; import LottieAnimations from '@components/LottieAnimations'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import variables from '@styles/variables'; const propTypes = { ...windowDimensionsPropTypes, - - shouldShowSmallScreen: PropTypes.bool, -}; - -const defaultProps = { - shouldShowSmallScreen: false, }; function SignInHeroImage(props) { const styles = useThemeStyles(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); let imageSize; - if (props.isSmallScreenWidth || props.shouldShowSmallScreen) { + if (shouldUseNarrowLayout) { imageSize = { height: variables.signInHeroImageMobileHeight, width: variables.signInHeroImageMobileWidth, diff --git a/src/pages/signin/SignInModal.js b/src/pages/signin/SignInModal.js index df266b557ced..2be6c8bc0bc9 100644 --- a/src/pages/signin/SignInModal.js +++ b/src/pages/signin/SignInModal.js @@ -30,7 +30,7 @@ function SignInModal() { testID={SignInModal.displayName} > - + ); } diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js index 9d5b51d667ff..12efce4f300c 100644 --- a/src/pages/signin/SignInPage.js +++ b/src/pages/signin/SignInPage.js @@ -9,6 +9,7 @@ import CustomStatusBarAndBackground from '@components/CustomStatusBarAndBackgrou import ThemeProvider from '@components/ThemeProvider'; import ThemeStylesProvider from '@components/ThemeStylesProvider'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -71,9 +72,6 @@ const propTypes = { /** Active Clients connected to ONYX Database */ activeClients: PropTypes.arrayOf(PropTypes.string), - /** Whether or not the sign in page is being rendered in the RHP modal */ - isInModal: PropTypes.bool, - /** The user's preferred locale */ preferredLocale: PropTypes.string, }; @@ -81,7 +79,6 @@ const propTypes = { const defaultProps = { account: {}, credentials: {}, - isInModal: false, activeClients: [], preferredLocale: '', }; @@ -132,12 +129,11 @@ function getRenderOptions({hasLogin, hasValidateCode, account, isPrimaryLogin, i }; } -function SignInPageInner({credentials, account, isInModal, activeClients, preferredLocale}) { +function SignInPageInner({credentials, account, activeClients, preferredLocale}) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate, formatPhoneNumber} = useLocalize(); - const {isSmallScreenWidth} = useWindowDimensions(); - const shouldShowSmallScreen = isSmallScreenWidth || isInModal; + const {shouldUseNarrowLayout} = useResponsiveLayout(); const safeAreaInsets = useSafeAreaInsets(); const signInPageLayoutRef = useRef(); const loginFormRef = useRef(); @@ -208,12 +204,12 @@ function SignInPageInner({credentials, account, isInModal, activeClients, prefer welcomeHeader = translate('welcomeText.anotherLoginPageIsOpen'); welcomeText = translate('welcomeText.anotherLoginPageIsOpenExplanation'); } else if (shouldShowLoginForm) { - welcomeHeader = isSmallScreenWidth ? headerText : translate('welcomeText.getStarted'); - welcomeText = isSmallScreenWidth ? translate('welcomeText.getStarted') : ''; + welcomeHeader = shouldUseNarrowLayout ? headerText : translate('welcomeText.getStarted'); + welcomeText = shouldUseNarrowLayout ? translate('welcomeText.getStarted') : ''; } else if (shouldShowValidateCodeForm) { if (account.requiresTwoFactorAuth) { // We will only know this after a user signs in successfully, without their 2FA code - welcomeHeader = isSmallScreenWidth ? '' : translate('welcomeText.welcomeBack'); + welcomeHeader = shouldUseNarrowLayout ? '' : translate('welcomeText.welcomeBack'); welcomeText = isUsingRecoveryCode ? translate('validateCodeForm.enterRecoveryCode') : translate('validateCodeForm.enterAuthenticatorCode'); } else { const userLogin = Str.removeSMSDomain(credentials.login || ''); @@ -221,19 +217,19 @@ function SignInPageInner({credentials, account, isInModal, activeClients, prefer // replacing spaces with "hard spaces" to prevent breaking the number const userLoginToDisplay = Str.isSMSLogin(userLogin) ? formatPhoneNumber(userLogin).replace(/ /g, '\u00A0') : userLogin; if (account.validated) { - welcomeHeader = shouldShowSmallScreen ? '' : translate('welcomeText.welcomeBack'); - welcomeText = shouldShowSmallScreen + welcomeHeader = shouldUseNarrowLayout ? '' : translate('welcomeText.welcomeBack'); + welcomeText = shouldUseNarrowLayout ? `${translate('welcomeText.welcomeBack')} ${translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay})}` : translate('welcomeText.welcomeEnterMagicCode', {login: userLoginToDisplay}); } else { - welcomeHeader = shouldShowSmallScreen ? '' : translate('welcomeText.welcome'); - welcomeText = shouldShowSmallScreen + welcomeHeader = shouldUseNarrowLayout ? '' : translate('welcomeText.welcome'); + welcomeText = shouldUseNarrowLayout ? `${translate('welcomeText.welcome')} ${translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay})}` : translate('welcomeText.newFaceEnterMagicCode', {login: userLoginToDisplay}); } } } else if (shouldShowUnlinkLoginForm || shouldShowEmailDeliveryFailurePage || shouldShowChooseSSOOrMagicCode) { - welcomeHeader = shouldShowSmallScreen ? headerText : translate('welcomeText.welcomeBack'); + welcomeHeader = shouldUseNarrowLayout ? headerText : translate('welcomeText.welcomeBack'); // Don't show any welcome text if we're showing the user the email delivery failed view if (shouldShowEmailDeliveryFailurePage || shouldShowChooseSSOOrMagicCode) { @@ -251,21 +247,19 @@ function SignInPageInner({credentials, account, isInModal, activeClients, prefer return ( // Bottom SafeAreaView is removed so that login screen svg displays correctly on mobile. // The SVG should flow under the Home Indicator on iOS. - + {/* LoginForm must use the isVisible prop. This keeps it mounted, but visually hidden so that password managers can access the values. Conditionally rendering this component will break this feature. */} [ @@ -142,7 +138,8 @@ function Footer(props) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const isVertical = props.shouldShowSmallScreen; + const {shouldUseNarrowLayout} = useResponsiveLayout(); + const isVertical = shouldUseNarrowLayout; const imageDirection = isVertical ? styles.flexRow : styles.flexColumn; const imageStyle = isVertical ? styles.pr0 : styles.alignSelfCenter; const columnDirection = isVertical ? styles.flexColumn : styles.flexRow; diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js index 5865c235335a..4735e75f6b9b 100755 --- a/src/pages/signin/SignInPageLayout/SignInPageContent.js +++ b/src/pages/signin/SignInPageLayout/SignInPageContent.js @@ -7,6 +7,7 @@ import OfflineIndicator from '@components/OfflineIndicator'; import SignInPageForm from '@components/SignInPageForm'; import Text from '@components/Text'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -32,14 +33,12 @@ const propTypes = { /** Whether to show welcome header on a particular page */ shouldShowWelcomeHeader: PropTypes.bool.isRequired, - /** Whether to show signIn hero image on a particular page */ - shouldShowSmallScreen: PropTypes.bool.isRequired, - ...withLocalizePropTypes, }; function SignInPageContent(props) { const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -77,9 +76,9 @@ function SignInPageContent(props) { - {props.shouldShowSmallScreen ? ( + {shouldUseNarrowLayout ? ( - + ) : null} diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js index e2f9c28f9fcd..08fd101f1b7b 100644 --- a/src/pages/signin/SignInPageLayout/index.js +++ b/src/pages/signin/SignInPageLayout/index.js @@ -6,6 +6,7 @@ import SignInGradient from '@assets/images/home-fade-gradient.svg'; import ImageSVG from '@components/ImageSVG'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import usePrevious from '@hooks/usePrevious'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -39,9 +40,6 @@ const propTypes = { /** A reference so we can expose scrollPageToTop */ innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - /** Whether or not the sign in page is being rendered in the RHP modal */ - shouldShowSmallScreen: PropTypes.bool, - /** Override the green headline copy */ customHeadline: PropTypes.string, @@ -53,7 +51,6 @@ const propTypes = { const defaultProps = { innerRef: () => {}, - shouldShowSmallScreen: false, customHeadline: '', customHeroBody: '', }; @@ -67,11 +64,12 @@ function SignInPageLayout(props) { let containerStyles = [styles.flex1, styles.signInPageInner]; let contentContainerStyles = [styles.flex1, styles.flexRow]; const {windowHeight} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); // To scroll on both mobile and web, we need to set the container height manually const containerHeight = windowHeight - props.insets.top - props.insets.bottom; - if (props.shouldShowSmallScreen) { + if (shouldUseNarrowLayout) { containerStyles = [styles.flex1]; contentContainerStyles = [styles.flex1, styles.flexColumn]; } @@ -99,7 +97,7 @@ function SignInPageLayout(props) { return ( - {!props.shouldShowSmallScreen ? ( + {!shouldUseNarrowLayout ? ( {props.children} @@ -172,16 +169,12 @@ function SignInPageLayout(props) { welcomeText={props.welcomeText} shouldShowWelcomeText={props.shouldShowWelcomeText} shouldShowWelcomeHeader={props.shouldShowWelcomeHeader} - shouldShowSmallScreen={props.shouldShowSmallScreen} > {props.children} -