woocommerce-ios
woocommerce-ios copied to clipboard
[Woo POS] New card reader connection images
Part of: #13731
Description
This is part of a series of PRs to improve the card reader connnection screens. You may want to test at the end of the series, as it could get quite repetitive, but doing it all in one was quite big. Up to you! The last one is #13775
This PR adds the new images, and use of them in the existing connection modals. I also took the opportunity to add a dark mode version of the empty state cart background image.
Steps to reproduce
- Launch the app
- Enter the POS
- Change between dark and light mode – observe that the empty state image looks correct in both.
- Tap
Connect your reader
- Change between dark and light mode on each view which follows in the flow – observe that the images look correct in both.
Using a physical reader to test error states:
- Launch the app
- Enter the POS
- Tap
Connect your reader
- Wait for the
Do you want to connect
screen – if it just auto-connects, tapReader connected
thenDisconnect reader
and try again - When on the
Do you want to connect
screen, turn off the reader, then tapConnect to reader
- The error screen will show shortly after that.
To test low battery errors:
Enable the simulated reader, and change Terminal.shared.simulatorConfiguration.availableReaderUpdate = .none
to .lowBattery
in StripeCardReaderService
- Launch the app
- Enter the POS
- Tap
Connect your reader
- Observe that after 20% of the update, the low battery error is shown
Testing information
I've tested these as I've gone along with development, and at the end of the flow. I used an iPad running iOS 16
Screenshots
Note that this video is from this branch – if you test later on, the rest of the modal UI will look a bit different.
https://github.com/user-attachments/assets/eceffc2c-2b17-4592-8e47-c14b1c97cdc3
- [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.