woocommerce-ios
woocommerce-ios copied to clipboard
[Woo POS] Add missing reader transitions
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
- Open POS
- Tap on "Connect your reader"
- Confirm the modal and the background fades in
- Confirm transitions are applied between states
- 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.