Merge pull request #30954 from tienifr/fix/30252

fix: 30252 Animation is not visible on desktop but visible on Mobile in sign in Modal
Expensify · Nov 20, 2023 · fb8bdb7 · fb8bdb7
2 parents 85a1e49 + 4748cff
commit fb8bdb7
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 20 deletions.
diff --git a/src/pages/signin/SignInHeroImage.js b/src/pages/signin/SignInHeroImage.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import Lottie from '@components/Lottie';
 import LottieAnimations from '@components/LottieAnimations';
@@ -7,12 +8,18 @@ import variables from '@styles/variables';
 
 const propTypes = {
     ...windowDimensionsPropTypes,
+
+    shouldShowSmallScreen: PropTypes.bool,
+};
+
+const defaultProps = {
+    shouldShowSmallScreen: false,
 };
 
 function SignInHeroImage(props) {
     const styles = useThemeStyles();
     let imageSize;
-    if (props.isSmallScreenWidth) {
+    if (props.isSmallScreenWidth || props.shouldShowSmallScreen) {
         imageSize = {
             height: variables.signInHeroImageMobileHeight,
             width: variables.signInHeroImageMobileWidth,
@@ -42,5 +49,6 @@ function SignInHeroImage(props) {
 
 SignInHeroImage.displayName = 'SignInHeroImage';
 SignInHeroImage.propTypes = propTypes;
+SignInHeroImage.defaultProps = defaultProps;
 
 export default withWindowDimensions(SignInHeroImage);
diff --git a/src/pages/signin/SignInPage.js b/src/pages/signin/SignInPage.js
@@ -241,7 +241,7 @@ function SignInPage({credentials, account, isInModal, activeClients, preferredLo
                 shouldShowWelcomeHeader={shouldShowWelcomeHeader || !isSmallScreenWidth || !isInModal}
                 shouldShowWelcomeText={shouldShowWelcomeText}
                 ref={signInPageLayoutRef}
-                isInModal={isInModal}
+                shouldShowSmallScreen={shouldShowSmallScreen}
             >
                 {/* 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. */}

diff --git a/src/pages/signin/SignInPageLayout/SignInPageContent.js b/src/pages/signin/SignInPageLayout/SignInPageContent.js
@@ -7,7 +7,7 @@ import OfflineIndicator from '@components/OfflineIndicator';
 import SignInPageForm from '@components/SignInPageForm';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInHeroImage from '@pages/signin/SignInHeroImage';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -32,20 +32,24 @@ 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,
-    ...windowDimensionsPropTypes,
 };
 
 function SignInPageContent(props) {
+    const {isSmallScreenWidth} = useWindowDimensions();
     const styles = useThemeStyles();
+
     return (
         <View style={[styles.flex1, styles.signInPageLeftContainer]}>
             <View style={[styles.flex1, styles.alignSelfCenter, styles.signInPageWelcomeFormContainer]}>
                 {/* This empty view creates margin on the top of the sign in form which will shrink and grow depending on if the keyboard is open or not */}
-                <View style={[styles.flexGrow1, props.isSmallScreenWidth ? styles.signInPageContentTopSpacerSmallScreens : styles.signInPageContentTopSpacer]} />
+                <View style={[styles.flexGrow1, isSmallScreenWidth ? styles.signInPageContentTopSpacerSmallScreens : styles.signInPageContentTopSpacer]} />
                 <View style={[styles.flexGrow2, styles.mb8]}>
                     <SignInPageForm style={[styles.alignSelfStretch]}>
-                        <View style={[props.isSmallScreenWidth ? styles.mb8 : styles.mb15, props.isSmallScreenWidth ? styles.alignItemsCenter : styles.alignSelfStart]}>
+                        <View style={[isSmallScreenWidth ? styles.mb8 : styles.mb15, isSmallScreenWidth ? styles.alignItemsCenter : styles.alignSelfStart]}>
                             <ExpensifyWordmark />
                         </View>
                         <View style={[styles.signInPageWelcomeTextContainer]}>
@@ -56,25 +60,25 @@ function SignInPageContent(props) {
                                         StyleUtils.getLineHeightStyle(variables.lineHeightSignInHeroXSmall),
                                         StyleUtils.getFontSizeStyle(variables.fontSizeSignInHeroXSmall),
                                         !props.welcomeText ? styles.mb5 : {},
-                                        !props.isSmallScreenWidth ? styles.textAlignLeft : {},
+                                        !isSmallScreenWidth ? styles.textAlignLeft : {},
                                         styles.mb5,
                                     ]}
                                 >
                                     {props.welcomeHeader}
                                 </Text>
                             ) : null}
                             {props.shouldShowWelcomeText && props.welcomeText ? (
-                                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !props.isSmallScreenWidth ? styles.textAlignLeft : {}]}>{props.welcomeText}</Text>
+                                <Text style={[styles.loginHeroBody, styles.mb5, styles.textNormal, !isSmallScreenWidth ? styles.textAlignLeft : {}]}>{props.welcomeText}</Text>
                             ) : null}
                         </View>
                         {props.children}
                     </SignInPageForm>
                     <View style={[styles.mb8, styles.signInPageWelcomeTextContainer, styles.alignSelfCenter]}>
                         <OfflineIndicator style={[styles.m0, styles.pl0, styles.alignItemsStart]} />
                     </View>
-                    {props.isSmallScreenWidth ? (
+                    {props.shouldShowSmallScreen ? (
                         <View style={[styles.mt8]}>
-                            <SignInHeroImage />
+                            <SignInHeroImage shouldShowSmallScreen />
                         </View>
                     ) : null}
                 </View>
@@ -86,4 +90,4 @@ function SignInPageContent(props) {
 SignInPageContent.propTypes = propTypes;
 SignInPageContent.displayName = 'SignInPageContent';
 
-export default compose(withWindowDimensions, withLocalize, withSafeAreaInsets)(SignInPageContent);
+export default compose(withLocalize, withSafeAreaInsets)(SignInPageContent);
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
@@ -4,8 +4,8 @@ import {ScrollView, View} from 'react-native';
 import {withSafeAreaInsets} from 'react-native-safe-area-context';
 import SignInGradient from '@assets/images/home-fade-gradient.svg';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import usePrevious from '@hooks/usePrevious';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import compose from '@libs/compose';
 import SignInPageHero from '@pages/signin/SignInPageHero';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -39,21 +39,20 @@ const propTypes = {
     innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
     /** Whether or not the sign in page is being rendered in the RHP modal */
-    isInModal: PropTypes.bool,
+    shouldShowSmallScreen: PropTypes.bool,
 
     /** Override the green headline copy */
     customHeadline: PropTypes.string,
 
     /** Override the smaller hero body copy below the headline */
     customHeroBody: PropTypes.string,
 
-    ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     innerRef: () => {},
-    isInModal: false,
+    shouldShowSmallScreen: false,
     customHeadline: '',
     customHeroBody: '',
 };
@@ -65,12 +64,12 @@ function SignInPageLayout(props) {
     const prevPreferredLocale = usePrevious(props.preferredLocale);
     let containerStyles = [styles.flex1, styles.signInPageInner];
     let contentContainerStyles = [styles.flex1, styles.flexRow];
-    const shouldShowSmallScreen = props.isSmallScreenWidth || props.isInModal;
+    const {windowHeight} = useWindowDimensions();
 
     // To scroll on both mobile and web, we need to set the container height manually
-    const containerHeight = props.windowHeight - props.insets.top - props.insets.bottom;
+    const containerHeight = windowHeight - props.insets.top - props.insets.bottom;
 
-    if (shouldShowSmallScreen) {
+    if (props.shouldShowSmallScreen) {
         containerStyles = [styles.flex1];
         contentContainerStyles = [styles.flex1, styles.flexColumn];
     }
@@ -96,7 +95,7 @@ function SignInPageLayout(props) {
 
     return (
         <View style={containerStyles}>
-            {!shouldShowSmallScreen ? (
+            {!props.shouldShowSmallScreen ? (
                 <View style={contentContainerStyles}>
                     <ScrollView
                         keyboardShouldPersistTaps="handled"
@@ -108,6 +107,7 @@ function SignInPageLayout(props) {
                             welcomeText={props.welcomeText}
                             shouldShowWelcomeText={props.shouldShowWelcomeText}
                             shouldShowWelcomeHeader={props.shouldShowWelcomeHeader}
+                            shouldShowSmallScreen={props.shouldShowSmallScreen}
                         >
                             {props.children}
                         </SignInPageContent>
@@ -167,6 +167,7 @@ function SignInPageLayout(props) {
                             welcomeText={props.welcomeText}
                             shouldShowWelcomeText={props.shouldShowWelcomeText}
                             shouldShowWelcomeHeader={props.shouldShowWelcomeHeader}
+                            shouldShowSmallScreen={props.shouldShowSmallScreen}
                         >
                             {props.children}
                         </SignInPageContent>
@@ -197,4 +198,4 @@ const SignInPageLayoutWithRef = forwardRef((props, ref) => (
 
 SignInPageLayoutWithRef.displayName = 'SignInPageLayoutWithRef';
 
-export default compose(withWindowDimensions, withSafeAreaInsets, withLocalize)(SignInPageLayoutWithRef);
+export default compose(withSafeAreaInsets, withLocalize)(SignInPageLayoutWithRef);