Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
4.03k stars 3.03k forks source link

[Merge Hold - Provisioning Profile] Share extension Android and iOS implementation #55748

Open filip-solecki opened 3 weeks ago

filip-solecki commented 3 weeks ago

Details

This PR introduces the implementation of Share Extension for mobile apps both for Android and iOS.

MOBILE-EXPENSIFY:13370

Fixed Issues

$https://github.com/Expensify/App/issues/48788 $https://github.com/Expensify/App/issues/48789 PROPOSAL:

Tests

Share test:

  1. Choose a text/file to share from gallery/file manager on device
  2. Select 'Expensify' as the target application to share to
  3. Choose 'Share' tab
  4. Choose a recipient/workspace to share to
  5. Check if 'Share Details' page displays correctly, specifically attachment's section -
    • no attachment if you shared text
    • file's thumbnail if you shared image/video
    • rectangle with file's name and paperclip icon in the rest of the cases
  6. Check if clicking in image/video thumbnail opens full-size modal with image/video
  7. Enter message
  8. Select 'Share'
  9. Check if shared content was shared successfully (added to chat with recipient or new chat was created)

Submit test:

  1. Choose a file to share from gallery/file manager on device
  2. Select 'Expensify' as the target application to share to
  3. Choose 'Submit' tab (should be available)
  4. Choose a recipient/workspace to share to
  5. Check if 'Submit Details' page displays correctly, specifically attachment's section with file's thumbnail
  6. Add description and save it
  7. Select 'Submit'
  8. Check if shared content was submitted successfully (added to chat with recipient or new chat was created)

Offline tests

N/A

QA Steps

N/A

PR Author Checklist

Screenshots/Videos

Android: Native Share: https://github.com/user-attachments/assets/c02605d4-b7d3-448e-8797-0f32ca98381a Submit: https://github.com/user-attachments/assets/bbee5791-6c04-49f3-b551-609ecf0b5b1f
Android: mWeb Chrome N/A
iOS: Native Share: https://github.com/user-attachments/assets/119da39e-323f-4cd2-a39a-94fe5ac3dc42 Submit: https://github.com/user-attachments/assets/671eb9d0-7275-4470-bcad-50a50e1cd53a
iOS: mWeb Safari N/A
MacOS: Chrome / Safari N/A
MacOS: Desktop N/A
melvin-bot[bot] commented 3 weeks ago

@Pujan92 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

filip-solecki commented 3 weeks ago

@grgia @Guccio163 This is the new PR for Share Extension in ND, I'm linking also the old one to keep everything here

filip-solecki commented 3 weeks ago

@grgia can you designate someone to do the review?

shawnborton commented 2 weeks ago

Videos look pretty good to me.

It's been a while since we wrote the design doc for this, but I think we should rename "Submit" here to just "Create expense": CleanShot 2025-01-27 at 08 12 54@2x

Thoughts @Expensify/design @JmillsExpensify @trjExpensify?

Also, for this submit flow, how does it work exactly? Does it just automatically scan the image, or something else? I am wondering why there aren't more fields for things like Merchant on the confirmation page.

shawnborton commented 2 weeks ago

Why is there a small delay between having just one Share button and then two buttons? CleanShot 2025-01-27 at 08 14 40@2x

CleanShot 2025-01-27 at 08 15 01@2x

grgia commented 2 weeks ago

Posted in #contributor-plus for a volunteer

github-actions[bot] commented 2 weeks ago

🚧 @mountiny has triggered a test hybrid app build. You can view the workflow run here.

github-actions[bot] commented 2 weeks ago
:test_tube::test_tube: Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! :test_tube::test_tube: Android :robot: iOS :apple:
❌ FAILED ❌ ❌ FAILED ❌
The QR code can't be generated, because the Android build failed The QR code can't be generated, because the iOS build failed
Desktop :computer: Web :spider_web:
N/A N/A
N/A N/A

:eyes: View the workflow run that generated this build :eyes:

github-actions[bot] commented 2 weeks ago

🚧 @grgia has triggered a test build. You can view the workflow run here.

github-actions[bot] commented 2 weeks ago

🚧 @mountiny has triggered a test hybrid app build. You can view the workflow run here.

github-actions[bot] commented 2 weeks ago
:test_tube::test_tube: Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! :test_tube::test_tube: Android :robot: iOS :apple:
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/55748/index.html ❌ FAILED ❌
Android The QR code can't be generated, because the iOS build failed
Desktop :computer: Web :spider_web:
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/55748/NewExpensify.dmg https://55748.pr-testing.expensify.com
Desktop Web

:eyes: View the workflow run that generated this build :eyes:

trjExpensify commented 2 weeks ago

Thoughts @Expensify/design @JmillsExpensify @trjExpensify?

Agreed, Create would be consistent now.

github-actions[bot] commented 2 weeks ago
:test_tube::test_tube: Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! :test_tube::test_tube: Android :robot: iOS :apple:
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/55748/index.html ❌ FAILED ❌
Android The QR code can't be generated, because the iOS build failed
Desktop :computer: Web :spider_web:
N/A N/A
N/A N/A

:eyes: View the workflow run that generated this build :eyes:

filip-solecki commented 2 weeks ago

Why is there a small delay between having just one Share button and then two buttons? CleanShot 2025-01-27 at 08 14 40@2x

CleanShot 2025-01-27 at 08 15 01@2x

Currently we can share also other types than just images, but only images may go to Submit section, the delay is because by default we show only Share tab (all file types might be shared) but after file type check we decide if we should show also Submit Tab for creating an expense. Should we hide everything by default and show when we know which Tabs should be available? @shawnborton @trjExpensify

filip-solecki commented 2 weeks ago

Also, for this submit flow, how does it work exactly? Does it just automatically scan the image, or something else? I am wondering why there aren't more fields for things like Merchant on the confirmation page.

This works exactly the same as creating an expense with the β€œ+” button, the image is scanned automatically

shubham1206agra commented 2 weeks ago

@filip-solecki Can you fix the build error on iOS?

dannymcclain commented 2 weeks ago

Currently we can share also other types than just images, but only images may go to Submit section, the delay is because by default we show only Share tab (all file types might be shared) but after file type check we decide if we should show also Submit Tab for creating an expense. Should we hide everything by default and show when we know which Tabs should be available? @shawnborton @trjExpensify

I wonder if by default we should show both options with the Create option disabled until we knowβ€”then after the file type check all we'd have to do is "un-disable" the Create tab. Might be a little less jarring since the UI won't need to shift at all. Thoughts on that approach @Expensify/design @trjExpensify?

trjExpensify commented 2 weeks ago

Yeah maybe, or what about skeleton loading the button area until we know what options we can present you?

shawnborton commented 2 weeks ago

I like the skeleton idea if it's not a pain to implement, otherwise I would be fine just leaving things as they are given that this isn't a mainline flow?

dannymcclain commented 2 weeks ago

I like the skeleton idea if it's not a pain to implement, otherwise I would be fine just leaving things as they are given that this isn't a mainline flow?

+1. I like the skeleton idea too.

dubielzyk-expensify commented 2 weeks ago

+3 on the skellies.

shubham1206agra commented 2 weeks ago

@filip-solecki Is there something you are stuck here on?

filip-solecki commented 2 weeks ago

I got stuck on merging SmartScan from OD with new Share Extension, but it is going pretty well today, I think I will add skeleton tomorrow and I'll take a look at the provisioning profile

grgia commented 2 weeks ago

@filip-solecki how's it going?

filip-solecki commented 2 weeks ago

I've prepared branch with changes needed for HybridApp and I've added skeleton for the Tab Navigator, WDYT? @Expensify/design @grgia Simulator Screenshot - iPhone 16 Pro - 2025-01-31 at 14 58 38 Simulator Screenshot - iPhone 16 Pro - 2025-01-31 at 14 59 49 Which one looks better? Or maybe you thought about something else πŸ˜„

shawnborton commented 1 week ago

It looks like the button shapes aren't perfectly pill shaped, they should have a larder border radius I think: CleanShot 2025-02-03 at 10 53 54@2x

shawnborton commented 1 week ago

For the text in the middle: CleanShot 2025-02-03 at 10 54 32@2x

I wouldn't think they would be rounded. I would think that they would be rectangular bars like we do elsewhere: CleanShot 2025-02-03 at 10 55 32@2x

CleanShot 2025-02-03 at 10 55 38@2x

grgia commented 1 week ago

@filip-solecki I pushed a PR with the encrypted provisioning profile here https://github.com/Expensify/App/pull/56267

filip-solecki commented 1 week ago

@grgia can you rerun standalone ND build?

github-actions[bot] commented 1 week ago

🚧 @grgia has triggered a test build. You can view the workflow run here.

github-actions[bot] commented 1 week ago
:test_tube::test_tube: Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! :test_tube::test_tube: Android :robot: iOS :apple:
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/55748/index.html ❌ FAILED ❌
Android The QR code can't be generated, because the iOS build failed
Desktop :computer: Web :spider_web:
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/55748/NewExpensify.dmg https://55748.pr-testing.expensify.com
Desktop Web

:eyes: View the workflow run that generated this build :eyes:

filip-solecki commented 1 week ago

Simulator Screenshot - iPhone 16 Plus - 2025-02-04 at 07 37 43 How about this @shawnborton ?

shawnborton commented 1 week ago

I think that feels better. Would love a video to see the loading in action though, if you get a moment. Thanks!

dannymcclain commented 1 week ago

I think that feels better. Would love a video to see the loading in action though, if you get a moment. Thanks!

Same. I also think we should decrease the gap between the skeleton buttons to be closer to what they'll end up being (8px).

shawnborton commented 1 week ago

Oh that's a fair shout, we actually don't really ever show two filled buttons side-by-side given that its a segmented control: CleanShot 2025-02-04 at 09 06 11@2x

So I wonder if we should only put a background color behind the left button in the skeleton? And then there would be zero gap between the two.

dannymcclain commented 1 week ago

Oh yeah I didn't realize that. That's a great call.

So I wonder if we should only put a background color behind the left button in the skeleton? And then there would be zero gap between the two

Super down with this approach.

grgia commented 1 week ago

@shawnborton @dannymcclain could we mock that up?

shawnborton commented 1 week ago

I'm thinking something like this: CleanShot 2025-02-04 at 10 39 14@2x

cc @Expensify/design for viz

dannymcclain commented 1 week ago

Looks good to me!

github-actions[bot] commented 1 week ago

🚧 @grgia has triggered a test build. You can view the workflow run here.

github-actions[bot] commented 1 week ago
:test_tube::test_tube: Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! :test_tube::test_tube: Android :robot: iOS :apple:
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/55748/index.html ❌ FAILED ❌
Android The QR code can't be generated, because the iOS build failed
Desktop :computer: Web :spider_web:
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/55748/NewExpensify.dmg https://55748.pr-testing.expensify.com
Desktop Web

:eyes: View the workflow run that generated this build :eyes:

github-actions[bot] commented 1 week ago

🚧 @grgia has triggered a test build. You can view the workflow run here.

github-actions[bot] commented 1 week ago

🚧 @grgia has triggered a test hybrid app build. You can view the workflow run here.

github-actions[bot] commented 1 week ago
:test_tube::test_tube: Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! :test_tube::test_tube: Android :robot: iOS :apple:
❌ FAILED ❌ ❌ FAILED ❌
The QR code can't be generated, because the Android build failed The QR code can't be generated, because the iOS build failed
Desktop :computer: Web :spider_web:
N/A N/A
N/A N/A

:eyes: View the workflow run that generated this build :eyes:

dubielzyk-expensify commented 1 week ago

Late, but like the new skelly

github-actions[bot] commented 1 week ago
:test_tube::test_tube: Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! :test_tube::test_tube: Android :robot: iOS :apple:
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/55748/index.html ❌ FAILED ❌
Android The QR code can't be generated, because the iOS build failed
Desktop :computer: Web :spider_web:
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/55748/NewExpensify.dmg https://55748.pr-testing.expensify.com
Desktop Web

:eyes: View the workflow run that generated this build :eyes:

github-actions[bot] commented 1 week ago

🚧 @AndrewGable has triggered a test build. You can view the workflow run here.

github-actions[bot] commented 1 week ago
:test_tube::test_tube: Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! :test_tube::test_tube: Android :robot: iOS :apple:
❌ FAILED ❌ ❌ FAILED ❌
The QR code can't be generated, because the Android build failed The QR code can't be generated, because the iOS build failed
Desktop :computer: Web :spider_web:
❌ FAILED ❌ https://55748.pr-testing.expensify.com
The QR code can't be generated, because the Desktop build failed Web

:eyes: View the workflow run that generated this build :eyes:

grgia commented 1 week ago

@staszekscp let's merge main and try again

github-actions[bot] commented 1 week ago

🚧 @AndrewGable has triggered a test build. You can view the workflow run here.