[HOLD for payment 2023-09-29] [Image] Feature Request: Introduce an ability to view workspace picture with a single tap - reported by @chauchausoup

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Problem:

We cannot see a workspace avatar picture in tap and view manner. Once a user uploads a workspace avatar image then there is no way for them to view it by any means.

Solution:

As in profile picture, avatar can be viewed by tapping on it while being on chat. We should implement similar feature with workspace avatar image too. We can make view ability if a user taps in Avatar under general settings. Only if they taps in camera icon then the usual Upload / Remove option should be shown.

##Context:
https://expensify.slack.com/files/U040F2ZTA3G/F040ZBKE2CB/rpreplay_final1662273851.mp4

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number:
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

RPReplay_Final1662273851.MP4

Expensify/Expensify Issue URL:
Issue reported by: @chauchausoup
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1662273908091079

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @kadiealexander (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[Puneet-here]

Proposal

I think instead we should show an option to view the image like this

To implement this we have to add a new item here

App/src/components/AvatarWithImagePicker.js

Lines 212 to 217 in 1b4721e

	const menuItems = [
	{
	icon: Expensicons.Upload,
	text: this.props.translate('avatarWithImagePicker.uploadPhoto'),
	onSelected: () => {
	openPicker({

 if (!this.props.isUsingDefaultAvatar) {
            menuItems.unshift({
                icon: Expensicons.Eye,
                text: this.props.translate('avatarWithImagePicker.viewPhoto'),
                onSelected: () => show(),
            });
        }

If we wanna show this all the time even for default avatar then we can just add this without any condition and if we wanna keep this option at bottom then we just need to push it.

We can reuse AttachmentModal. Wrap the Pressable below with AttachmentModal

App/src/components/AvatarWithImagePicker.js

Line 243 in 1b4721e

<Pressable

App/src/components/AvatarWithImagePicker.js

Line 284 in 1b4721e

</Pressable>

We have to wrap it so that we can pass so that we can pass show function in the

App/src/components/AvatarWithImagePicker.js

Line 277 in 1b4721e

menuItems={this.createMenuItems(openPicker)}

like we pass here in the Pressable's onPress

App/src/pages/DetailsPage.js

Lines 119 to 127 in 1b4721e

	<AttachmentModal
	headerTitle={isSMSLogin ? this.props.toLocalPhone(details.displayName) : details.displayName}
	sourceURL={details.avatar}
	isAuthTokenRequired
	>
	{({show}) => (
	<PressableWithoutFocus
	style={styles.noOutline}
	onPress={show}

we can also make some changes in the AttachmentModal so that it shows when we pass a prop.

In the end we just need to pass needed props to AttachmentModal
Questions:-

1. What should be the headerTitle? Should we just say "Avatar"
2. Do we need to pass isAuthTokenRequired?
3. Should we allow downloading image?

[melvin-bot]

Triggered auto assignment to @Gonals (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[melvin-bot]

@Gonals Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Current assignee @Gonals is eligible for the External assigner, not assigning anyone new.

[Gonals]

Setting as external!

There are a couple of questions from @Puneet-here, but it looks like a good proposal to me

[Santhosh-Sellavel]

@NicMendonca

Busy with existing work items, also limited availability for next couple weeks So un-assigning this one. Can you reassign this to another C+ by reapplying the external label?

Also, Leave a note there is a proposal yet to be reviewed #11197 (comment).

Thanks!

[trjExpensify]

PR is being held for the merge freeze, but we should wrap-up here in a few days melv!

[melvin-bot]

@trjExpensify, @rushatgabhane, @stitesExpensify, @Puneet-here Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@trjExpensify, @rushatgabhane, @stitesExpensify, @Puneet-here Eep! 4 days overdue now. Issues have feelings too...

[trjExpensify]

@Puneet-here there are conflicts to resolve, please jump on them and let's get this finished. Thanks!

[Puneet-here]

Updated! Sorry for the delay from my side, I am out right now.

[melvin-bot]

Based on my calculations, the pull request did not get merged within 3 working days of assignment. Please, check out my computations here:

• when @Puneet-here got assigned: 2023-06-20 13:43:56 Z
• when the PR got merged: 2023-09-19 04:03:49 UTC
• days elapsed: 64

On to the next one 🚀

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.72-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Add avatar preview feature #22145

If no regressions arise, payment will be issued on 2023-09-29. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @rushatgabhane does not require payment (Eligible for Manual Requests)
• @Puneet-here requires payment
• @chauchausoup requires payment

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[trjExpensify]

Alright, seems like we're ready to make payments here! Old bounty levels of $1,000 apply on this issue because it was created prior to August 30th, but it's still a new feature request which we don't pay for reporting as bugs.

This PR took longer than 9 days, so a 50% reduction in the bounty applies per here. That makes the payouts by my calculation:

• @Puneet-here - $500 for the implementation
• @rushatgabhane - $500 for the review
• @chauchausoup - $250 for the feature request (this issue was created in Sept 22 prior to the change in policy to not pay for these in Nov 22).

Everyone agree on that? Let me know, and I'll send @Puneet-here an offer in Upwork, and Rushat you can proceed to request.

[chauchausoup]

@trjExpensify while I was reporting the Feature Request , it was written in FR guideline that FR is viable for a bounty.

[melvin-bot]

📣 @chauchausoup! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[trjExpensify]

Oh hm, fair enough. That policy went into place in Nov 2022 here. This issue was created in Sept 22 originally, so yes, $250 is due for the report.

Added that to my post above and sent you an offer. Waiting for confo from @rushatgabhane on the payments above to proceed!

[chauchausoup]

Thank you @trjExpensify .

[trjExpensify]

@chauchausoup paid!
@Puneet-here offer sent.
@rushatgabhane free to proceed to request.

[Puneet-here]

Accepted.

[trjExpensify]

Paid!

[JmillsExpensify]

$500 payment approved for @rushatgabhane based on BZ summary

[trjExpensify]

Okay great, closing now then!