Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Add avatar details to the Lounge Access Page #26687

Merged
merged 4 commits into from
Sep 12, 2023
Merged

Fix: Add avatar details to the Lounge Access Page #26687

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cd3787a
overlay content changes for lounge access page
Pujan92 Sep 4, 2023
4442f2e
lint fix
Pujan92 Sep 4, 2023
39b622c
PR comment addressed
Pujan92 Sep 5, 2023
67a4d12
Merge branch 'main' into fix/24381
Pujan92 Sep 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/components/IllustratedHeaderPageLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -65,6 +69,7 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
autoPlay
loop
/>
{overlayContent && overlayContent()}
</View>
<View style={[styles.pt5]}>{children}</View>
</ScrollView>
Expand Down
70 changes: 63 additions & 7 deletions src/pages/settings/Profile/LoungeAccessPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 = [
Expand All @@ -35,18 +57,46 @@ const menuItems = [
},
];

function LoungeAccessPage({user}) {
function LoungeAccessPage(props) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAB for now but let's generally try to stick with using props destructuring. This will be required when we migrate to TypeScript

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"
Expand All @@ -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);