Native Share Menu - Finalize Mock Ups to Include Scan Flow

[grgia]

We've decided to incorporate Scan Receipt into Sharing. I've created this issue so we can track updating the mocks. Original convo here: https://expensify.slack.com/archives/C04KQL2HSQ1/p1696595463762209?thread_ts=1696347905.090599&cid=C04KQL2HSQ1

We may need to do a mini predesign for any questions that come up about the design of this flow.

We also need to update the IOS screenshots to remove the gap at the top: https://expensify.slack.com/archives/C01GTK53T8Q/p1696888061811039?thread_ts=1680526472.867539&cid=C01GTK53T8Q

[melvin-bot]

Current assignee @dubielzyk-expensify is eligible for the Design assigner, not assigning anyone new.

[grgia]

cc @lindboe

[dubielzyk-expensify]

Adding mocks here as well

[lindboe]

@grgia Do we want to also use this opportunity to update the other design detail changes that have been discussed so far, not specific to scanning?

By my count, we have:

• Back button instead of "X"
• Display a button on the selection lists for who to send to (when we were reusing the "Create group" screen we had "create group" as the copy on the button in the prototype, but that's confusing if you might be sharing an attachment to a single person, existing group, or room)
• We had not settled on a place to display a "file too large" error on the attachment/message screen, so a mock with error copy would be good to add. I'm not sure yet if there's a corresponding error that can be shown on the money request creation screen, but I assume we'll want to re-use whatever behavior is there?

[dubielzyk-expensify]

Let me know if you need anything more on my end

[dubielzyk-expensify]

Any updates?

[lindboe]

Hi @dubielzyk-expensify! I've aggregated the list of items that need updating according to what we've discussed, if you'd be able to update the mocks accordingly? I'm not sure if there's a figma link we can refer to make sure we cover everything?

I'm going to cover both "Share" and "Scan" flows here since both have had changes:

General

1. The screens should be using a back arrow icon button, not an "X".
2. The "Share/Scan" tab bar will not be shown if the user is sharing a text string or URL, and the user will only be shown the "Share" flow in that case, as there's no file to attach to a request.

Share

1. The "share to" selection screen for sharing to chat should match the Chat Search in the LHN. (i.e., it should include existing DMs, groups, rooms, and other threads. Can also type in contact info to start a new DM.)
2. It might be a good idea to create separate mocks for the three "share to chat" cases. There's rough examples of these variations in the first version of the pre-design doc here, but also listed below:
   (a) a previewable file (should show the file preview component with the file preview and the file name, and an empty message input)
   (b) a non-previewable file (should show the file preview component with only the file name, and an empty message input)
   (c) text (no file preview component, only a pre-filled message field).
3. The "File too large" mockup we discussed in pre-design. This looks good, just a note that the limit is 10MB, if we want that to match.
4. The message input for the Share flow should show an error message (red border with red text beneath) if pre-filled or user-filled with text that's too long (10K+ characters). The Text input will grow with input size but shouldn't grow beyond the screen size (or we can impose another limit if that makes more sense?)

Scan

1. When selecting who to send a request to, the screen contents should match those on making a request now: a list of users and workspaces, each with a "Split" button to the right.
2. Optionally: We could show the green "Split" button on the bottom while selecting request participants
3. Optionally: We could make a mock showing the request details/confirmation when splitting a request, but it should be the same as the existing flow, so we can just screenshot that in the product if we want, like this:
   

[dubielzyk-expensify]

Thanks for a super well written overview. I've done my best to get final mocks on this Figma page.

There's small inaccuracies with the chat list of workspaces vs room but ignore them for now. We need to fix those components in Figma.

Optionally: We could show the green "Split" button on the bottom while selecting request participants
I think the split selection screen is a bit weird, but I'd prefer to fix that as part of fixing the general split flow. So for now let's use the same thing.

On the split flow, I wonder if we should not use that terminology when "scanning". In some ways I think it's better to almost just click "scan", but stick more with the wording of Add to group. Cause it feels weird to go from sharing to split. Thoughts?

Happy to fix any other issues and hope I got all your points in the mocks!

[lindboe]

On the split flow, I wonder if we should not use that terminology when "scanning". In some ways I think it's better to almost just click "scan", but stick more with the wording of Add to group. Cause it feels weird to go from sharing to split. Thoughts?

My understanding of what we want to do here is basically re-use the existing screen and behavior. Just to make sure we're talking about the same thing, here's a screenshot of the existing screen (the bottom button actually says "Add to split", my mistake):

My understanding is that a "split" is already a well-defined term when it comes to requests (i.e., we're making multiple requests to multiple people to split an expense), but a "group" wouldn't be when it comes to requests, so what that does would be ambiguous for someone who had split a request before. Does that address your concerns, or is it something else?

Also a note, just to make sure this is clear: with the change to use "Chat search", there should no longer be an "Add to group" button for "Share", because chat search does not support creating new groups.

I'm taking a look at the rest of the mocks later today!

[dubielzyk-expensify]

That make sense to me 👍

[lindboe]

Looks good, just wanted to verify a few details, if you have input on any of them:

1. The error modal for "file too large" says "Close" on the button. To me, that sounds like closing the error modal, but we said we want it to navigate "back" out of the share flow entirely. Should it be named something else, like "Back" or "Back to Expensify"?
2. Is there an existing design intention for how the multi-line input should grow in the app? The existing component isn't very clear on that front so just wanted to ask.
3. The Request details confirmation page example does not have the "Show more" pill, which it normally would when making a request. Should we have that, or is the intent here to expand the fields by default?

[dubielzyk-expensify]

1. Good question, but I think this is fine cause I don't wanna confuse them with where they're going to go at that time.
2. We generally let the multi-line input grow up until a certain point (5-7 lines ish) then we have it scroll internally. I think the same would apply here
3. If we don't have more fields, then let's not show that. I'm still pretty new so there's gonna be some errors on my end here and there :) Thanks for flagging!

[lindboe]

On item 3, to clarify, there are more fields! Sorry for the confusion. I think having the "Show more" pill is the appropriate way to go, since that's the way the existing page behaves, just wasn't sure if this mock was intended to display all the fields expanded or not.

[dubielzyk-expensify]

Anything more needed here?

[lindboe]

I think we're good, thank you!

[dubielzyk-expensify]

Is this good to close out @grgia ?

[melvin-bot]

This issue has not been updated in over 15 days. @dubielzyk-expensify eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[dubielzyk-expensify]

Can we close this one out or are we also tracking the engineering work on this?

[dubielzyk-expensify]

Is this just for design? If so, can I close this out as designs have been delivered?

[dubielzyk-expensify]

Any updates here?

[dubielzyk-expensify]

@grgia for any updates?

[dubielzyk-expensify]

Looks like @dannymcclain is updating this from a mock perspective, so should we close this one?

[dannymcclain]

@dubielzyk-expensify I say close it. :run-away: