woocommerce-ios icon indicating copy to clipboard operation
woocommerce-ios copied to clipboard

[Woo POS] Add missing reader transitions

Open staskus opened this issue 5 months ago • 2 comments

Closes: #13700

Description

Added missing reader transitions:

  • Fade in / fade out when the modal appears
  • Transition between modal states by moving view elements

Solution

For transitioning between modal states I used the same approach as with in-line message views and applied matchedGeometryEffect. It allows synchronizing transitions between same type of elements in different views.

For modal animations, I worked within POSModalViewModifier implementation. I made sure the animation is applied when modal is presented and when item changes.

I also wanted to apply different transitions for modal presentation (push from bottom + opacity) and Reader state changes (element transition + opacity) but couldn't manage to apply a different transition to the content of a modal 🤔 I settled on simpler changes.

Steps to reproduce

  1. Open POS
  2. Tap on "Connect your reader"
  3. Confirm the modal and the background fades in
  4. Confirm transitions are applied between states
  5. Confirm the modal and the background fades out

Testing information

Changes are user-facing, no unit tests

I manually iterated through all the possible Reader connection alerts to confirm that they work as expected. Attached a video below.

The change also affects other models. Tested:

  • Simple product modal
  • Exit POS modal
  • Capture payment modal

Screenshots

Simulated iteration through all the reader states

https://github.com/user-attachments/assets/4a6986cf-b103-406d-be5c-be9a0b8ab8d6

Connection flow

https://github.com/user-attachments/assets/86f4c0e7-0d0f-4fcd-8f7b-05fa63032c51


  • [x] I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

  • [ ] The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
  • [ ] Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
  • [ ] Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on all devices (phone/tablet) and no regressions are added.

staskus avatar Aug 28 '24 15:08 staskus