[HOLD][Tracking] Add Native Share Menus to New Dot - Share Into New Expensify

[grgia]

Design Doc

https://docs.google.com/document/d/10agvPMrVzXViEaH47gAXr9CZN62aaI3L5kj4aoj5LhI/edit

Proposal

Let’s implement native share menus so users can both share-to and share-from New Dot.

Problem:
There are plenty of times where I want to share something from outside our app into New Expensify. But there’s no way to quickly share links/photos/information while outside Expensify. For example, if I’m in the Photos App and I decide I want to share a photo, I’ll have to leave the app → open New Dot → go to the correct chat → click add attachments → find the same image again → and so on.
On the flipside, there’s no easy way to export information from inside the app to outside Expensify. There’s no quick solution to export a PDF to print or to AirDrop a photo from one device to another.

Solution:
Let’s utilize one of our external agencies to implement Native Share Menus.
Share menus are an essential feature to most other chat apps. If a user wants to send a photo, let’s make it as easy as possible. From the photo app you’d just click share → New Expensify and voila! In fact, we already have this feature for Old Dot. Right now, you can take a picture -> share -> Expensify, and immediately start a smartScan. So adding Share Menus to New Dot would be a requirement to maintain feature parity between Old and New Apps.
As for sharing from inside Expensify to outside sources, to make New Expensify our go-to chat and finance collaboration app in the future, we should be able to communicate with those who have not yet adopted the app. For those of us that are eager to use NewDot as our primary chat app in our day-to-day lives, this feature would be a valuable way to encourage that while the rest of the world is still using WhatsApp. Later on, external sharing can feed into our viral business model, where chats/photos/links sent from New Expensify can be wrapped in an advertising moment, incentivizing people to join New Expensify from other chat apps.

https://expensify.slack.com/archives/CC7NECV4L/p1675375866420119

Pre-designs

Initial Pre-design
Design Pre-design

Tasks

• Post Proposal (full Problem/Solution statement) in #whatsnext
• Wait at least one full business day, and until the post has a majority (2/3) of positive reactions (👍)
• Paste Proposal in the space above with a link to the Slack thread
• Email [email protected] and paste in the Proposal
• Fill out the High-level overview of the problem, Timeline, and Terminology sections of the Design Doc
• Email [email protected] (continue the same email chain as before) with the link to your Design Doc
• Host a pre-design meeting (example) in an appropriate slack channel to discuss any necessary details in public before filling out the High-level of proposed solution section.
• Fill out the High-level of proposed solution section
• Email [email protected] again with links to the doc and pre-design conversation in Slack
• Add the DesignDocReview label to get the High-level of proposed solution section reviewed
• Respond to any questions or concerns and bring up blockers in Slack to get a consensus if necessary
• Confirm that the doc has the minimum necessary number of reviews before proceeding
• Host another pre-design meeting in the appropriate slack channel to ask for engineering feedback on the technical solution.
• Fill out the Detailed implementation of the solution and related sections.
• Re-add the DesignDocReview label to this issue
• Respond to any questions or concerns and bring up blockers in Slack to get consensus if necessary
• Confirm that the doc has the minimum necessary number of reviews before proceeding
• Email [email protected] one last time to let them know the Design Doc is moving into the implementation phase
• Implement the changes
• Send out a follow up email to [email protected] once everything has been implemented and do a Project Wrap-Up retrospective that provides:
  • Summary of what we accomplished with this project
  • What went well?
  • What could we have done better?
  • What did we learn?

Related Issues

Mockup: #16256

[grgia]

Started a conversation about working with an external agency here

[grgia]

I have updated the HL Design Doc

Some questions to keep in mind for a predesign:

For Share-to-Expensify:
What activity will be triggered when clicking share? Do we want users to send a message?
What will our Share Sheet look like? What information can the user customize when sharing into the app? How will a user select the destination of what they are sharing?
How can we design this so we can later include sharing a photo -> Scan Receipt?

For Share-from-Expensify:
What content should be shareable? Should it just be photos/attachments/QR codes? Should users be able to share IOU's/Report links?
How might a share be initiated? Should we use the long-press and add it to the context menu? Should a user be able to share a link to a room with a share icon/button in the chat header?

[grgia]

Some related libraries:

React Native

• Share

External (I suggest we consider these, as we will want the ability to better customize the share modal)

• react-native-share
• react-native-share-menu

[grgia]

Sharing Link / Photo -> Clicking Expensify

Sharing Link / Photo -> Clicking Expensify DM

[grgia]

@lindboe Could you comment on this so I can assign you?

[lindboe]

Commenting!

[roryabraham]

Super excited!

[lindboe]

@grgia Violations is still ongoing and at the current pace looks likely to continue into next week. I expect we'll be able to start picking up Share again mid-next-week.

[grgia]

Implementation is in progress

[JmillsExpensify]

I have read and reviewed this Design Doc!

[grgia]

Implementation is in progress, current ETA end of feb

[lindboe]

Hand-off information, to add on from the design doc:

For planned updates to react-native-share-menu, this is the root tracking issue: Expensify/react-native-share-menu#294. There are linked issues that have some associated PRs already.

There's a google doc available here with extra notes and information from prior prototyping work here, some of which is for react-native-share-menu, and some is for New Expensify: https://docs.google.com/document/d/1ku-jZ9mjDkRgMHWGhe-bmuPAwK88sh5WgczU3vc2mfw/edit?usp=sharing.

[grgia]

Putting this project on HOLD temporarily while we discuss integrating with Hybrid Web

[trjExpensify]

👋 I haven't migrated this issue to the #wave-collect project. If this project doesn't get taken care of as part of HybridApp, bring it up in the #wave-collect channel. Thanks!

[grgia]

Going to close this out in favor of #36613