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

[Woo POS] Use POS styles in reader connection modals

Open joshheald opened this issue 5 months ago • 2 comments

Part of: #13731 Merge after: #12771

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 updates the POS card reader connection modals to use POS buttons and on the Multiple readers view, font styles. Other views previously had the correct font styles applied.

Steps to reproduce

  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. Observe that the buttons use the new style
  6. Tap Keep searching
  7. Turn on another reader
  8. Observe that the multiple readers screen shows and uses POS fonts (except the connect buttons – handled later)
  9. Tap connect on a reader, but turn it off at the same time
  10. The error screen will show shortly after that – observe that it uses the new buttons.

Address issues:

First, delete the first line of your store address in WP-admin > Woocommerce > Settings

  1. Launch the app
  2. Enter the POS
  3. Tap Connect your reader
  4. The error screen will show shortly after that – observe that it uses the new buttons.

Testing information

I have tested these on an iPad running iOS 16. No unit tests as it's UI only.

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/b384cced-0888-49de-8535-372b64fe5427


  • [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