[HOLD for payment 2023-09-21] [$1000] Add avatar details to the Lounge Access Page

[thienlnam]

To help identify customers and address #nocreeps violations, we're going to add the avatar to the lounge access page for when users check in.

1. Update the lounge access page to include the avatar, display name, and login like this mockup

Internal issue

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01cb19c0e49400d07e
• Upwork Job ID: 1689690079128702976
• Last Price Increase: 2023-08-31
• Automatic offers:
• Pujan92 | Contributor | 26439127

[melvin-bot[bot]]

Triggered auto assignment to @puneetlath (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot[bot]]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~01cb19c0e49400d07e

[melvin-bot[bot]]

Triggered auto assignment to @tjferriss (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (External)

[melvin-bot[bot]]

Triggered auto assignment to @puneetlath (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @burczu (External)

[thienlnam]

Accidentally added the 'External' label twice, removed the second C+ assignee - sorry for the noise

[samh-nl]

I'd like to work on this (unsure if this requires a formal proposal).

[Pujan92]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add avatar details in the lounge access page

What is the root cause of that problem?

New feature

What changes do you think we should make in order to solve the problem?

1. Use withCurrentUserPersonalDetails for getting the current user personal details and add session in withOnyx to fetch from Onyx if required to show the email as we do the same for InitialSettingsPage. https://github.com/Expensify/App/blob/cceb862e4566b10cc5afecf1d016af45f87177d6/src/pages/settings/InitialSettingsPage.js#L379

2. To make the overlay on the Illustration we need to use linear-gradient with colors(transparent, black or appBg). We can use direct css linear-gradient but it will only works for the web and not for native. So we need to use the lib react-native-linear-gradient. This lib is already added in this PR.

For that, we can create a prop called shouldShowGradient in IllustratedHeaderPageLayout and pass value true from LoungeAccessPage. For shouldShowGradient true we need to use LinearGradient by passing the colors which we also configured later if required.

https://github.com/Expensify/App/blob/cceb862e4566b10cc5afecf1d016af45f87177d6/src/components/IllustratedHeaderPageLayout.js#L59-L66 After Lottie,

{shouldShowGradient && <LinearGradient colors={['transparent', themeColors.appBG]} style={[styles.pAbsolute, styles.w100, styles.h100]} />}

3. Create the flex View with aligned content in the center which will have the avatar, display name and login consisting of required margins/paddings.

4. To place the content on the Illustration we need to provide a negative margin for the above View.

Result

[jeet-dhandha]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• New Feature Request: To show Profile Details in Lounge Access Page as well.

What is the root cause of that problem?

• Its a new feature request.

What changes do you think we should make in order to solve the problem?

• We will use withCurrentUserPersonalDetails to get the user's details and also the code we have in InitialSettingsPage.js.
• InitialSettingsPage.js code also handles skeleten view so we will use that code to show the skeleten view until we get the user's details. ( We can remove navigation to profile screen if needed)
• I have created a "illustration-fade-gradient.svg" file which is somewhat similar to "home-fade-gradient--mobile.svg" which we use as SignInGradient, this we will use to add a gradient to the illustration.
• I have also added a "View" tag over the below code with this styles {position: 'absolute', top: -120, left: 0, right: 0} to position it correctly.

Initial Settings page code (For Profile Render)

https://github.com/Expensify/App/blob/ed0e54667ae19c8ad4e73c18ae2bfbc5a0b9d13d/src/pages/settings/InitialSettingsPage.js#L338-L383

Final Output: (Web / iOS)

Compare Changes Link:

• https://github.com/Expensify/App/compare/main...jeet-dhandha:Expensify-App:lounge-access-profile?expand=1

What alternative solutions did you explore? (Optional)

• N/A

[puneetlath]

@thienlnam do you want to be the CME for this since you're proposing the feature?

[thienlnam]

Sure I can take it

[puneetlath]

Cool, I'll still stay on for the BZ-side.

[pradeepmdk]

can i work on this as this an feature request so i think no need formal proposal.

[puneetlath]

@pradeepmdk you should still make a proposal for how you'll implement it if you'd like the job.

[pradeepmdk]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add avatar details to the Lounge Access Page

What is the root cause of that problem?

new feature request

What changes do you think we should make in order to solve the problem?

• we can use withCurrentUserPersonalDetails from onyx wrapped component
• for Illustrated we can reuse IllustratedHeaderPageLayout.js from the workspace list
• for Layout we can use View and Text Component
• for linear gradient on opacity gradient we can use react-native-svghttps://medium.com/@ibrahimozdogan/adding-gradient-in-react-native-f75ddd02aea4 or we can react-native-linear-gradient recently added to our project.

https://github.com/Expensify/App/blob/8d84c23ae3a21130a540794104313b2f7e7e6b6a/src/pages/settings/Profile/LoungeAccessPage.js for adding user details in the Illustrated we need to set the parent view should toposition: relative and the user view should be position: absolute in the IllustratedHeaderPageLayout.js we add overlayComponent with position: absolute like footer

  <View style={styles.overscrollSpacer(backgroundColor, windowHeight)} />
                            <View style={[styles.alignItemsCenter, styles.pRelative, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor)]}>
                                <Lottie
                                    source={illustration}
                                    style={styles.w100}
                                    autoPlay
                                    loop
                                />
                                {!_.isNull(overlayComponent) && <View style={[styles.loungeAccess]}>
                                    {overlayComponent}
                                </View>}
                            </View>
                            <View style={[styles.pt5]}>{children}</View>
                        </ScrollView>
                        {!_.isNull(footer) && <FixedFooter>{footer}</FixedFooter>}

and we need to create an overlay component with user Details that will pass from https://github.com/Expensify/App/blob/8d84c23ae3a21130a540794104313b2f7e7e6b6a/src/pages/settings/Profile/LoungeAccessPage.js

 <IllustratedHeaderPageLayout
            title={translate('loungeAccessPage.loungeAccess')}
            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
            illustration={LottieAnimations.ExpensifyLounge}
            overlayComponent={<View >
                <Text style={{color: 'green'}}>
                pradeep
            </Text>
            </View>}
        >

[Santhosh-Sellavel]

All the proposals have a general outline, But I would like more details specifically on how we are planning to add the user details above the illustration.

Thanks!

[pradeepmdk]

@Santhosh-Sellavel proposal updated https://github.com/Expensify/App/issues/24381#issuecomment-1673780098

[jeet-dhandha]

@Santhosh-Sellavel Updated Proposal with: (https://github.com/Expensify/App/issues/24381#issuecomment-1673650589)

• Output Screenshots
• Extra points on how to handle Fade View and Positioning of Profile.
• Compare Changes Link on what code needs to be added.

Please give suggestions if needed.

[Pujan92]

@Santhosh-Sellavel proposal updated https://github.com/Expensify/App/issues/24381#issuecomment-1673650212.

[tjferriss]

Un-assigning myself as @puneetlath is handling BugZero role.

[Santhosh-Sellavel]

Sorry for the delay here.

After checking the proposals all proposals should do the job, @pradeepmdk proposal has it all required. And I like the idea of overlayComponent for rendering the Avatar and username. Over negative margin idea from other proposals.

cc: @thienlnam Let me know your thoughts

[jeet-dhandha]

@Santhosh-Sellavel Just a small request for you, can you review all other proposals and point out the disadvantage they have over the selected proposal

[Pujan92]

@Santhosh-Sellavel @pradeepmdk We need the user details to show on the Lottie animation part as well outside of it. I doubt how it can be achieved with Overlay component with user details to place after Lottie code as mentioned in the selected proposal.

I do believe that to achieve the above, negative margin for the View makes sense as we do need a space for the content(making that overflow will overlap with the Lounge access page content and needs adjustment to overcome overlap unnecessarily which doesn't looks correct to me).

[pradeepmdk]

@Pujan92 we can do without negative margin

[Pujan92]

@pradeepmdk I assume you have increased the top margin/padding of the content which starts with "You qualify...". If this is the case then it is the other way around only. So this leads to if we increase more content for the user details you need to adjust or increase more margin/padding as the content is set with the absolute position. Whereas this won't be the situation when we set relative position for the user details content. does this makes sense?

[pradeepmdk]

@Pujan92 I am not using margin/padding for content only using flex for rendering the content

style={[styles.flex1, styles.justifyContentEnd, styles.alignItemsCenter]}

[shawnborton]

Looks like the avatar needs to be a bit bigger too.

[pradeepmdk]

@shawnborton this is bigger image in our app same size in the profile screen avatarSizeLarge: 80,

 avatarLarge: {
        width: variables.avatarSizeLarge,
        height: variables.avatarSizeLarge,
    },

[shawnborton]

Fair point, what if we update those to be 100x100 everywhere?

[pradeepmdk]

let me list out where our these changes reflacted

[Pujan92]

@pradeepmdk can you plz explain when you use absolute View for the user details part, how the below content goes down with flex without setting any margin/padding between Lottie and content? I would appreciate if you can list down all the suggested changes with code as I still have a doubt about it.(Requesting bcoz my thinking is when the View requires space(height/width) separately we should go with Relative instead absolute)

[pradeepmdk]

@Pujan92 you don't need to move the content to the bottom you can use locations

<LinearGradient
                    locations={[0, 0.73]}
                    colors={['transparent', themeColors.appBG, ]}
                    style={[styles.flex1, styles.justifyContentEnd, styles.alignItemsCenter]}
                >
                   {profile()}
                </LinearGradient>

this will take fill up the Lottie space if we need more space in the bottom we can add in relative to the bottom space

                            <View style={[styles.alignItemsCenter, styles.pRelative, styles.pb8, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor)]}>

[Pujan92]

@Pujan92 you don't need to move the content to the bottom you can use locations locations={[0, 0.73]} <View style={[styles.alignItemsCenter, styles.pRelative, styles.pb8, styles.justifyContentEnd,

Exactly, my point here is that we need to adjust locations and styles.pb8(which you applied for the space I am mentioning) whenever we have a change in the content size of the user details part. Due to this, I am not considering it as a preferable solution. In contrast to above, I am suggesting the overlay only on the Lottie animation part and negative margin for the relative user details View. With that, we don't need to use/adjust locations or extra paddings.

I am not sure whether @Santhosh-Sellavel @thienlnam are following what I am trying to highlight.

[Santhosh-Sellavel]

Thanks, everyone for the active discussion.

Sorry @jeet-dhandha.

I don't see a disadvantage in any of the proposals. We have two similar proposals yours & @Pujan92 only difference is the difference in linear background. I liked the overlay idea In @pradeepmdk's proposal as it comes in handy for other pages too.

Regarding @Pujan92's thoughts

I don't see any negative in using locations.

But setting up the bottom padding seems off to me, Where would this go @pradeepmdk ?

 <View style={[styles.alignItemsCenter, styles.pRelative, styles.pb8, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor)]}>

[Pujan92]

I think the fade-out needs to be applied on only Lottie, otherwise it seems to be like a workaround to me as need to adjust as per the content height. For eg. if in the user details we add some more content then location 0.73 may be starts after the animation, so no effect can be seen on Lottie. Considering the mentioned handy part, I think it won't work consistently when it is used at other places where Lottie's height and the content height get changed as 0.73 seems to be worked only for this scenario.

[pradeepmdk]

@Santhosh-Sellavel without styles.pb8 still working

@Pujan92 I am not adding this linear component to the IllustratedHeaderPageLayout page. overlayComponent comes from LoungeAccessPage and the same for style overlayComponentStyle comes from LoungeAccessPage only. styles.pb8 is still also coming from LoungeAccessPage in overlayComponentStyle for adding space at the bottom. we have already footer component like this only

 <IllustratedHeaderPageLayout
            title={translate('loungeAccessPage.loungeAccess')}
            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
            illustration={LottieAnimations.ExpensifyLounge}
            overlayComponentStyle={[styles.pb8]}
            overlayComponent={
                <LinearGradient
                    locations={[0, 0.73]}
                    colors={['transparent', themeColors.appBG, ]}
                    style={[styles.flex1, styles.justifyContentEnd, styles.alignItemsCenter]}
                >
                   {profile()}
                </LinearGradient>
            }
        >

  !_.isNull(overlayComponent) && <View style={[styles.pAbsolute, styles.w100, styles.h100]}>{overlayComponent}</View>

[shawnborton]

That feels like it doesn't quite match the mockup though - the header area with the lounge illustration feels too short.

[pradeepmdk]

@shawnborton Yes that's why I added styles.pb8 for adding more space for illustration

[Santhosh-Sellavel]

@pradeepmdk where overlayComponentStyle is used?

[pradeepmdk]

@Santhosh-Sellavel here

 <IllustratedHeaderPageLayout
            title={translate('loungeAccessPage.loungeAccess')}
            onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
            illustration={LottieAnimations.ExpensifyLounge}
            illustrationStyle={[{marginBottom: 60}]}
            overlayComponent={
                <LinearGradient
                    locations={[0, 0.8]}
                    colors={['transparent', themeColors.appBG, ]}
                    style={[styles.flex1, styles.justifyContentEnd, styles.alignItemsCenter]}
                >
                   {profile()}
                </LinearGradient>
            }
        >

<Lottie
                                    source={illustration}
                                    style={[styles.w100, ...illustrationStyle]}
                                    autoPlay
                                    loop
                                />

[Santhosh-Sellavel]

Thank you @pradeepmdk!

[shawnborton]

Can you share the latest screenshot of this?

[pradeepmdk]

if we need more space we can increase the padding-bottom

and avatarLarge used those places https://github.com/Expensify/App/blob/b07cbefe04ab2f7d4d815ffa2cb1a082c6ea4950/src/components/AvatarWithImagePicker.js?#L236 https://github.com/Expensify/App/blob/b07cbefe04ab2f7d4d815ffa2cb1a082c6ea4950/src/components/RoomHeaderAvatars.js?#L47

https://github.com/Expensify/App/blob/b07cbefe04ab2f7d4d815ffa2cb1a082c6ea4950/src/pages/DetailsPage.js?#L158

https://github.com/Expensify/App/blob/b07cbefe04ab2f7d4d815ffa2cb1a082c6ea4950/src/pages/ProfilePage.js?#L169

https://github.com/Expensify/App/blob/b07cbefe04ab2f7d4d815ffa2cb1a082c6ea4950/src/pages/settings/InitialSettingsPage.js?#L352 https://github.com/Expensify/App/blob/b07cbefe04ab2f7d4d815ffa2cb1a082c6ea4950/src/pages/workspace/WorkspaceInitialPage.js?#L210

https://github.com/Expensify/App/blob/b07cbefe04ab2f7d4d815ffa2cb1a082c6ea4950/src/pages/workspace/WorkspaceSettingsPage.js

[shawnborton]

Yeah, that doesn't quite match up with the mockup. Can you take another look please and see if we can get that illustration area just slightly taller?

[pradeepmdk]

[shawnborton]

Nice, that feels better!

[pradeepmdk]

can I create the PR?

[puneetlath]

@thienlnam you good with @pradeepmdk moving forward? As @Santhosh-Sellavel recommended here.