Replace usages of isInModal and shouldShowSmallScreen props in components

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, isInModal} = useResponsiveLayout();
 
     const {translate} = props;
 
@@ -159,7 +157,7 @@ function LoginForm(props) {
     );
 
     function getSignInWithStyles() {
-        return props.isSmallScreenWidth ? [styles.mt1] : [styles.mt5, styles.mb5];
+        return shouldUseNarrowLayout ? [styles.mt1] : [styles.mt5, styles.mb5];
     }
 
     /**
@@ -213,7 +211,7 @@ function LoginForm(props) {
             return;
         }
         let focusTimeout;
-        if (props.isInModal) {
+        if (isInModal) {
             focusTimeout = setTimeout(() => input.current.focus(), CONST.ANIMATED_TRANSITION);
         } else {
             input.current.focus();
@@ -332,7 +330,7 @@ function LoginForm(props) {
                                         {props.translate('common.signInWith')}
                                     </Text>
 
-                                    <View style={props.isSmallScreenWidth ? styles.loginButtonRowSmallScreen : styles.loginButtonRow}>
+                                    <View style={shouldUseNarrowLayout ? styles.loginButtonRowSmallScreen : styles.loginButtonRow}>
                                         <View onMouseDown={(e) => e.preventDefault()}>
                                             <AppleSignIn />
                                         </View>

src/pages/signin/SignInHeroImage.js

@@ -1,30 +1,22 @@
-import PropTypes from 'prop-types';
 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 useWindowDimensions from '@hooks/useWindowDimensions';
 import variables from '@styles/variables';
 
-const propTypes = {
-    ...windowDimensionsPropTypes,
-
-    shouldShowSmallScreen: PropTypes.bool,
-};
-
-const defaultProps = {
-    shouldShowSmallScreen: false,
-};
-
-function SignInHeroImage(props) {
+function SignInHeroImage() {
     const styles = useThemeStyles();
+    const {isMediumScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     let imageSize;
-    if (props.isSmallScreenWidth || props.shouldShowSmallScreen) {
+    if (shouldUseNarrowLayout) {
         imageSize = {
             height: variables.signInHeroImageMobileHeight,
             width: variables.signInHeroImageMobileWidth,
         };
-    } else if (props.isMediumScreenWidth) {
+    } else if (isMediumScreenWidth) {
         imageSize = {
             height: variables.signInHeroImageTabletHeight,
             width: variables.signInHeroImageTabletWidth,
@@ -48,7 +40,5 @@ function SignInHeroImage(props) {
 }
 
 SignInHeroImage.displayName = 'SignInHeroImage';
-SignInHeroImage.propTypes = propTypes;
-SignInHeroImage.defaultProps = defaultProps;
 
-export default withWindowDimensions(SignInHeroImage);
+export default SignInHeroImage;

src/pages/signin/SignInModal.js

@@ -30,7 +30,7 @@ function SignInModal() {
             testID={SignInModal.displayName}
         >
             <HeaderWithBackButton />
-            <SignInPage isInModal />
+            <SignInPage />
         </ScreenWrapper>
     );
 }

src/pages/signin/SignInPage.js

@@ -9,10 +9,10 @@ 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';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
 import * as Localize from '@libs/Localize';
 import Log from '@libs/Log';
@@ -72,17 +72,13 @@ 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,
 };
 
 const defaultProps = {
     account: {},
     credentials: {},
-    isInModal: false,
     activeClients: [],
     preferredLocale: '',
 };
@@ -133,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();
@@ -212,32 +207,32 @@ 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 || '');
 
             // 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) {
@@ -256,23 +251,21 @@ function SignInPageInner({credentials, account, isInModal, activeClients, prefer
         // Bottom SafeAreaView is removed so that login screen svg displays correctly on mobile.
         // The SVG should flow under the Home Indicator on iOS.
         <View
-            style={[styles.signInPage, StyleUtils.getSafeAreaPadding({...safeAreaInsets, bottom: 0, top: isInModal ? 0 : safeAreaInsets.top}, 1)]}
+            style={[styles.signInPage, StyleUtils.getSafeAreaPadding({...safeAreaInsets, bottom: 0, top: shouldUseNarrowLayout ? 0 : safeAreaInsets.top}, 1)]}
             testID={SignInPageInner.displayName}
         >
             <SignInPageLayout
                 welcomeHeader={welcomeHeader}
                 welcomeText={welcomeText}
-                shouldShowWelcomeHeader={shouldShowWelcomeHeader || !isSmallScreenWidth || !isInModal}
+                shouldShowWelcomeHeader={shouldShowWelcomeHeader || !shouldUseNarrowLayout}
                 shouldShowWelcomeText={shouldShowWelcomeText}
                 ref={signInPageLayoutRef}
-                shouldShowSmallScreen={shouldShowSmallScreen}
                 navigateFocus={navigateFocus}
             >
                 {/* 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. */}
                 <LoginForm
                     ref={loginFormRef}
-                    isInModal={isInModal}
                     isVisible={shouldShowLoginForm}
                     blurOnSubmit={account.validated === false}
                     scrollPageToTop={signInPageLayoutRef.current && signInPageLayoutRef.current.scrollPageToTop}

src/pages/signin/SignInPageLayout/Footer.js

@@ -9,6 +9,7 @@ import ImageSVG from '@components/ImageSVG';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -20,11 +21,6 @@ import CONST from '@src/CONST';
 const propTypes = {
     ...withLocalizePropTypes,
     navigateFocus: PropTypes.func.isRequired,
-    shouldShowSmallScreen: PropTypes.bool,
-};
-
-const defaultProps = {
-    shouldShowSmallScreen: false,
 };
 
 const columns = ({navigateFocus}) => [
@@ -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;
@@ -219,6 +216,5 @@ function Footer(props) {
 
 Footer.propTypes = propTypes;
 Footer.displayName = 'Footer';
-Footer.defaultProps = defaultProps;
 
 export default withLocalize(Footer);

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) {
                     <View style={[styles.mb8, styles.signInPageWelcomeTextContainer, styles.alignSelfCenter]}>
                         <OfflineIndicator style={[styles.m0, styles.pl0, styles.alignItemsStart]} />
                     </View>
-                    {props.shouldShowSmallScreen ? (
+                    {shouldUseNarrowLayout ? (
                         <View style={[styles.mt8]}>
-                            <SignInHeroImage shouldShowSmallScreen />
+                            <SignInHeroImage />
                         </View>
                     ) : null}
                 </View>

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 (
         <View style={containerStyles}>
-            {!props.shouldShowSmallScreen ? (
+            {!shouldUseNarrowLayout ? (
                 <View style={contentContainerStyles}>
                     <ScrollView
                         keyboardShouldPersistTaps="handled"
@@ -111,7 +109,6 @@ function SignInPageLayout(props) {
                             welcomeText={props.welcomeText}
                             shouldShowWelcomeText={props.shouldShowWelcomeText}
                             shouldShowWelcomeHeader={props.shouldShowWelcomeHeader}
-                            shouldShowSmallScreen={props.shouldShowSmallScreen}
                         >
                             {props.children}
                         </SignInPageContent>
@@ -172,16 +169,12 @@ function SignInPageLayout(props) {
                             welcomeText={props.welcomeText}
                             shouldShowWelcomeText={props.shouldShowWelcomeText}
                             shouldShowWelcomeHeader={props.shouldShowWelcomeHeader}
-                            shouldShowSmallScreen={props.shouldShowSmallScreen}
                         >
                             {props.children}
                         </SignInPageContent>
                     </View>
                     <View style={[styles.flex0]}>
-                        <Footer
-                            navigateFocus={props.navigateFocus}
-                            shouldShowSmallScreen
-                        />
+                        <Footer navigateFocus={props.navigateFocus} />
                     </View>
                 </ScrollView>
             )}