Merge pull request #26687 from Pujan92/fix/24381

Fix: Add avatar details to the Lounge Access Page
Expensify · Sep 12, 2023 · a2000cb · a2000cb
2 parents d28b359 + 67a4d12
commit a2000cb
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 8 deletions.
diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
@@ -27,14 +27,18 @@ const propTypes = {
 
     /** A fixed footer to display at the bottom of the page. */
     footer: PropTypes.node,
+
+    /** Overlay content to display on top of animation */
+    overlayContent: PropTypes.func,
 };
 
 const defaultProps = {
     backgroundColor: themeColors.appBG,
     footer: null,
+    overlayContent: null,
 };
 
-function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, ...propsToPassToHeader}) {
+function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, overlayContent, ...propsToPassToHeader}) {
     const {windowHeight} = useWindowDimensions();
     const {isOffline} = useNetwork();
     return (
@@ -65,6 +69,7 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                                     autoPlay
                                     loop
                                 />
+                                {overlayContent && overlayContent()}
                             </View>
                             <View style={[styles.pt5]}>{children}</View>
                         </ScrollView>

diff --git a/src/pages/settings/Profile/LoungeAccessPage.js b/src/pages/settings/Profile/LoungeAccessPage.js
@@ -1,5 +1,7 @@
 import React from 'react';
+import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import PropTypes from 'prop-types';
 import Navigation from '../../../libs/Navigation/Navigation';
 import ROUTES from '../../../ROUTES';
 import * as Illustrations from '../../../components/Icon/Illustrations';
@@ -10,14 +12,34 @@ import useLocalize from '../../../hooks/useLocalize';
 import FeatureList from '../../../components/FeatureList';
 import IllustratedHeaderPageLayout from '../../../components/IllustratedHeaderPageLayout';
 import * as LottieAnimations from '../../../components/LottieAnimations';
+import compose from '../../../libs/compose';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../../../components/withCurrentUserPersonalDetails';
+import LinearGradient from '../../../components/LinearGradient';
+import styles from '../../../styles/styles';
+import Avatar from '../../../components/Avatar';
+import Text from '../../../components/Text';
+import * as UserUtils from '../../../libs/UserUtils';
+import CONST from '../../../CONST';
+import themeColors from '../../../styles/themes/default';
+import * as LocalePhoneNumber from '../../../libs/LocalePhoneNumber';
 
 const propTypes = {
+    /** The session of the logged in person */
+    session: PropTypes.shape({
+        /** Email of the logged in person */
+        email: PropTypes.string,
+    }),
+
     /** Current user details, which will hold whether or not they have Lounge Access */
     user: userPropTypes,
+
+    ...withCurrentUserPersonalDetailsPropTypes,
 };
 
 const defaultProps = {
+    session: {},
     user: {},
+    ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
 const menuItems = [
@@ -35,18 +57,46 @@ const menuItems = [
     },
 ];
 
-function LoungeAccessPage({user}) {
+function LoungeAccessPage(props) {
     const {translate} = useLocalize();
 
-    if (!user.hasLoungeAccess) {
+    if (!props.user.hasLoungeAccess) {
         return <NotFoundPage />;
     }
 
+    const overlayContent = () => (
+        <LinearGradient
+            colors={[`${themeColors.dark}00`, themeColors.dark]}
+            style={[styles.pAbsolute, styles.w100, styles.h100]}
+        >
+            <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter, styles.pt5]}>
+                <Avatar
+                    imageStyles={[styles.avatarLarge]}
+                    source={UserUtils.getAvatar(props.currentUserPersonalDetails.avatar, props.session.accountID)}
+                    size={CONST.AVATAR_SIZE.LARGE}
+                />
+                <Text
+                    style={[styles.textHeadline, styles.pre, styles.mt2]}
+                    numberOfLines={1}
+                >
+                    {props.currentUserPersonalDetails.displayName ? props.currentUserPersonalDetails.displayName : LocalePhoneNumber.formatPhoneNumber(props.session.email)}
+                </Text>
+                <Text
+                    style={[styles.textLabelSupporting, styles.mt1]}
+                    numberOfLines={1}
+                >
+                    {LocalePhoneNumber.formatPhoneNumber(props.session.email)}
+                </Text>
+            </View>
+        </LinearGradient>
+    );
+
     return (
         <IllustratedHeaderPageLayout
             title={translate('loungeAccessPage.loungeAccess')}
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             illustration={LottieAnimations.ExpensifyLounge}
+            overlayContent={overlayContent}
         >
             <FeatureList
                 headline="loungeAccessPage.headline"
@@ -61,8 +111,14 @@ LoungeAccessPage.propTypes = propTypes;
 LoungeAccessPage.defaultProps = defaultProps;
 LoungeAccessPage.displayName = 'LoungeAccessPage';
 
-export default withOnyx({
-    user: {
-        key: ONYXKEYS.USER,
-    },
-})(LoungeAccessPage);
+export default compose(
+    withCurrentUserPersonalDetails,
+    withOnyx({
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
+        user: {
+            key: ONYXKEYS.USER,
+        },
+    }),
+)(LoungeAccessPage);