Share QR Code Feature

[robertjchen]

• Every individual should have their own QR code (simply a link to https://new.expensify.com/details?login=<user@domain.com>), which any other smartphone owner can scan to generate a 1:1 chat with them and connect via Expensify, accessible within their profile settings under a new "Share Code" button.
• Same for rooms, except the QR code is a link to https://new.expensify.com/r/<chatReportID>
• For now, the Share button will just copy the link to the clipboard (in the future we'll add a share menu but that's still in planning/development)
• Download will download a PNG image or the QR code (maybe SVG, but not sure if many phones will be able to read it)

Implementation Guide

There are no network calls involved with this feature, so it will work regardless of Offline status. QR codes are generated locally on the app, the login and reportID of the room are already available in Onyx.

QR Code Library Integration

• Run npm i -S react-native-svg react-native-qrcode-svg
• Go into ios/ and run pod install

New Component

This will wrap the <QRcode /> component coming from the library to simplify the interface for our own purposes. This new component would be specifically used for QR codes containing a URL.

Props:

type: PropTypes.string,
value: PropTypes.oneOfType(PropTypes.string, PropTypes.number),
logo: PropTypes.func,
download: PropTypes.func

• type - specifies the QR code type of either "profile" or a "room"
• value - the user email or room ID
• logo - path to the icon/avatar image
• download(base64) - callback to download the QR code image as base64 string.

Render:

<QRCode
  value=this.url
  logo={{uri: this.base64Logo}}
  getRef={(c) => (this.svg = c)
  logoBackgroundColor='transparent'
  logoSize={30}
/>

• this.url - The URL to be embedded in the QR code, generated based on this.props.type incorporating this.props.value e.g. https://new.expensify.com/r/12345 for "room" and https://new.expensify.com/details?login=person%40expensify.com "profile"
• this.base64Logo - this.props.logo retrieved and converted to a base64 logo for display
• this.svg - stores the ref of the resulting QR code (as an SVG) so that it can be downloaded/exported

Misc Changes

• In src/languages/en.js and src/languages/es.js, add a new entry for the text of the button as a new entry under common:

English - shareCode: 'Share Code',
Spanish - shareCode: 'Compartir código',

• Create a QR code icon as seen in the mockup assets/images/qrcode.svg and add it to components/Icon/Expensicons.js as a new QRCode entry.

Generic QR Code Share Page

• Under src/pages create ShareCodePage.js according to the mockup using the following components.

Based on how we get routed to the page:

• If a reportID is provided as a param then we would specify the proper type ("room"), value (ROUTES.getReportRoute(reportID)) and logo (Expensicons.Couch) for the <QRShare> component.
• Otherwise, we would display a QR Code for the current user's profile of type ("room"), value (ROUTES.getDetailsRoute(accountID)) and logo (Avatar)

Props:

/** Navigation route context info provided by react navigation */
route: PropTypes.shape({
    /** Route specific parameters used on this screen */
    params: PropTypes.shape({
        reportID: PropTypes.string,
    }).isRequired,
 }).isRequired,

Render Tree (rough outline):

<ScreenWrapper>
  <HeaderWithCloseButton
    title={this.props.translate('common.shareCode')}
    shouldShowBackButton
    onBackButtonPress={() => Navigation.goBack()}
    onCloseButtonPress={() => Navigation.dismissModal(true)}
  />
    <View >
	<QRShare 
  type
  value
  logo />
    </View>

    <View>
	<MenuItem /> // Download
    </View>
...

Routing

In ModalStackNavigators.js, create a new entry for the Share Code page under:

const ReportDetailsModalStackNavigator = createModalStackNavigator([
...
  {
    getComponent: () => {
      const ShareCodePage = 
require('../../../pages/ShareCodePage.js').default;
     return ShareCodePage;
    },
    name: 'Share_Code_Page',
  }
...
]);

Do the same under SettingsModalStackNavigator as well.

In ROUTES.js add the following into the list for export default:

SETTINGS_PROFILE_SHARE_CODE:
'settings/profile/shareCode',

REPORT_WITH_ID_DETAILS_SHARE_CODE: 'r/:reportID/details/shareCode',

getReportShareCodeRoute: reportID => `r/${reportID}/details/shareCode`

For Room QR Codes: Under src/libs/Navigation/linkingConfig.js, add a new entry under config.screens.Settings.screens as:

Report_Details_Share_Code:
  screens: {
Share_Code_Page: ROUTES.REPORT_WITH_ID_DETAILS_SHARE_CODE,
  },
}

For Personal QR Codes: Under src/libs/Navigation/linkingConfig.js, add a new entry under config.screens.Settings.screens as above, but using Settings_Profile_Share_Code as the key and SETTINGS_PROFILE_SHARE_CODE as the value.

Personal QR Code Share Button

In pages/settings/ProfilePage.js after the <AvatarWithImagePicker> component, add a new <Button> component:

<Button
text={this.props.translate('common.shareCode')}
iconRight={Expensicons.QRCode}
onPress={Navigation.navigate(ROUTES.SETTINGS_PROFILE_SHARE_CODE)}
/>

Room QR Code Share Button

In pages/ReportDetailsPage.js within the reportDetailsRoomInfo append a new <Button> component in the same manner as the Personal QR code above.

Except, in Navigation.navigate we use ROUTES.getReportDetailsShareCode(reportID).

Tests

QR Code in Personal Settings

• Visit the Personal Profile Settings menu
• Under your profile name and picture, verify that there is a new "Show QR Code" button.
• Click/Tap on the button.
• Verify that you are brought to a page with a QR code
• Verify that your profile picture is displayed within the QR code
• Using another phone, scan the QR code on the page and verify that it takes you to New Dot to view the profile page of the user.

Sharing QR Code from Personal Settings

• Visit the Personal Profile Settings menu
• Tap the "Show QR Code" button under your profile name and picture
• Verify that you see two menu items: Share and Download
• Tap on "Download" and verify that a QR code image is saved to your phone.

QR Code for Rooms

• Create a Chat
• Visit the Chat details page
• Under the #name and policy name of the room, verify that there is a new "Show QR Code" button.
• Click/Tap on the button.
• Verify that you are brought to a page with a QR code
• Using another phone logged into an Expensify account under the same domain and/or policy, scan the QR code on the page and - verify that you have joined the Chat

Sharing QR Code from Personal Settings

• Visit the Personal Profile Settings menu
• Tap the "Show QR Code" button under your profile name and picture
• Verify that you see two menu items: Share and Download
• Tap on "Download" and verify that a QR code image is saved to your phone.

[melvin-bot]

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

[chrispader]

I'm, working on this in this PR

[chrispader]

This library is not web-compatible, at least from what i've tested so far. Should i put in some effort in trying to fix the upstream QR code library or into creating a fork?

[chrispader]

Do we have an "Expensify" logo like in the mocks? Or do we plan on rendering a text with that font above the QR code?

[robertjchen]

Wow, amazing progress! 🤩

This library is not web-compatible, at least from what i've tested so far. Should i put in some effort in trying to fix the upstream QR code library or into creating a fork?

I think we should create a fork! Alternatively, are there other libraries that we could use that would be more appropriate, or is this the best we could use? 🤔

Do we have an "Expensify" logo like in the mocks? Or do we plan on rendering a text with that font above the QR code?

Ah, good point! I think the idea is that one would be able to download and share the QR code and the "Expensify" logo would also be included so that people would know what the QR code is for 🤔

Maybe we can use the wordmark from our press kit to start, and we can always adjust later 👍 https://use.expensify.com/press-kit

[robertjchen]

That said, I think we can go with being able to display a basic QR code in-app (without web and just basic text) to start with, as an initial MVP.

We can refine things further on a second pass after people start using it- as we have some big conferences coming up where we'll have lots of IRL testing 😅 🙏

[chrispader]

This library is not web-compatible, at least from what i've tested so far. Should i put in some effort in trying to fix the upstream QR code library or into creating a fork?

@robertjchen nevermind, just needed to add the library to includeModules in the webpack config, as the svg content would otherwise not be transpiled into html-compatible tags

[chrispader]

Also, could you give me access to the mock figma file?

[robertjchen]

@chrispader shared! 👍

[chrispader]

Pretty much finished most of the work here, i slightly updated the component signature of QRShare, because it feels more logical to me. For example, i would pass the url directly from the screen, instead concatenating it in the QRShare component.

Also, i needed to create a separate ReportDetailsShareCodePage, because i cannot use the withOnyx hook, when there is no reportID in the route.

Quick sneak peek of the current status: (You can find more screenshots in the PR)

[chrispader]

Currently working on the logic for Download, since we also want to have the "Expensify" frame in the picture. Share is already working and it just copies the URL

[chrispader]

@robertjchen i think one of you guys will need to add the "QRCode" icon from the designs to the codebase, i don't know how to do that..

Also, the "Share" icon in the designs is slightly different than Expensicons.Link, right?

[chrispader]

Currently working on the logic for Download

Found a library called react-native-view-shot, which let's you take screenshots of specific views. This should solve the problem right how we want to. Working on implementing that.

I suppose, the user should be prompted where to save the file once downloaded? e.g. camera roll on native and "Save file" dialog on web/desktop?

[robertjchen]

Looks amazing!! 😍

i think one of you guys will need to add the "QRCode" icon from the designs to the codebase, i don't know how to do that..

Let me followup on that! 👀

Also, the "Share" icon in the designs is slightly different than Expensicons.Link, right?

I think so- I'll need to followup on that as well. In the meantime, please feel free to use what exists- we can always after adjust them after the fact 👍

I suppose, the user should be prompted where to save the file once downloaded? e.g. camera roll on native and "Save file" dialog on web/desktop?

Yep- whatever is the simplest!

[chrispader]

Downloading the QR code on native also works already, though the library is not web-compatible unfortunately.

[chrispader]

Downloading the QR code on native also works already, though the library is not web-compatible unfortunately.

I'll spend some personal time to try get web-support upstream... I feel like this is the only library for screenshots, particularly for screenshots of specific views.

[chrispader]

If we want to ship it right now, we can just download the QR code only or disable the "Download" button on web for now. You can still always copy the URL by clicking "Share"

[robertjchen]

re: tiny qr code. Here's the SVG:

We can copy the svg to the assets directory add it to the list import QRIcon from '../../../assets/images/qrcode.svg'; in https://github.com/Expensify/App/blob/main/src/components/Icon/Expensicons.js and export { and we should be able to use it directly!

re: the "Share" icon in the designs is slightly different than Expensicons.Link

I think we can stick with Expensicons.Link 👍

[chrispader]

For now it seems, that neither react-native-qr-code-svg or react-native-view-shot are able to take screenshots on web.

For react-native-qr-code-svg it's actually a missing feature in react-native-svg, so i commented on an issue there.

Should we just disable the "Download" button on web for now? On both iOS and Android downloading the "QR Share Card" works just fine with a few tweaks in the fileDownload util function

[robertjchen]

Yep, let's just disable the "Download" button on Web for now 👍

Also some feedback from Design Team:

the link icon inside of the Share Code button should use our icon color instead of our button text color. Also, the button text should be Sentence case and not Title Case

I had the button height at 28px in the original mocks too, would be curious to see that (which is our “small” button style)

though I almost think an option row at the bottom of the view would look better than a button, and more consistent

So it sounds like we could try a smaller "Share Code" button with that color scheme. Maybe we could also prep a screenshot with an option row at the bottom just to see what it's like? ✨

[chrispader]

the link icon inside of the Share Code button should use our icon color instead of our button text color.

By "icon color" the green as in the design is meant, right?

That's how it would look like:

[robertjchen]

correct! That's my understanding as well, I think us switching to the new SVG icon addressed that point 👍

[chrispader]

That would be the extra option row:

[robertjchen]

Thanks! The team loves the option row a lot more! Could we have it as the first option above Members (for room details) and Workspaces (for profile)? 🙏

[chrispader]

So do you mean instead of in ProfilePage we want to link to the ShareCodePage directly from SettingsPage?

[robertjchen]

I guess we would want it in both places? Instead of having a tiny Share Code button in both places, we'd have a menu option in both places if that makes sense 🙏

[chrispader]

Oh i mean just for the profile, the Workspaces option is not on ProfilePage but on the SettingsPage, so one layer up.

Was this a mistake or intentional?

[chrispader]

I can add it to both pages (ProfilePage and SettingsPage) too if you want 👍

[robertjchen]

Ah, I think that's intentional-SettingsPage is the right place for the Share Code menu item, I don't think ProfilePage needs it? Let me know if these areas are what you're referring to.

Settings Page ✅

Profile Page ❌

[chrispader]

Got it, thanks!

[chrispader]

@robertjchen All finished now! Just updating the screenshots in the PR

[robertjchen]

Thanks again for the quick tunaround! 🙇 I'll review 👍

[robertjchen]

Amazing work, this is now merged! 🙇 We'll work on a followup v2 GH issue once people have had a chance to play/test it at Expensicon 😅

[chrispader]

Great!! Thanks for letting me work on this 🥳🚀

[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.14-14 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Feat: Share QR Code #18636

If no regressions arise, payment will be issued on 2023-05-23. 🎊

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

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