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

[Woo POS] New card reader connection images

Open joshheald opened this issue 5 months ago • 2 comments

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

  1. Launch the app
  2. Enter the POS
  3. Change between dark and light mode – observe that the empty state image looks correct in both.
  4. Tap Connect your reader
  5. 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:

  1. Launch the app
  2. Enter the POS
  3. Tap Connect your reader
  4. Wait for the Do you want to connect screen – if it just auto-connects, tap Reader connected then Disconnect reader and try again
  5. When on the Do you want to connect screen, turn off the reader, then tap Connect to reader
  6. 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

  1. Launch the app
  2. Enter the POS
  3. Tap Connect your reader
  4. 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.

joshheald avatar Aug 28 '24 14:08 joshheald