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

[Woo POS] Processing payment animation

Open joshheald opened this issue 1 year ago • 3 comments

Closes: #13696

Description

This PR replaces the static icon used on Processing states with an animated waves image.

I've used a ProgressView as that seemed like it had good semantic meaning.

I couldn't get all the values I needed out of Figma, so this is done by eye – comments welcome. Particularly the arc radii and lengths are the product of trial and error.

I deliberately hid the progress view from accessibility when showing on the "Show Card Reader Message" view, as it feels secondary, even misleading there. The payment isn't processing, the system is waiting on user action like "Remove Card".

Steps to reproduce

  1. Launch the app and enter POS mode
  2. Connect a card reader
  3. Add something to the cart and check out
  4. Tap your card
  5. Observe that the waves shown are animated during the processing step.

Testing information

I've tested this on an iPad running iOS 16

I tested dark mode, accessibility, and transitions.

No unit tests as it's UI only.

Screenshots

https://github.com/user-attachments/assets/cf5d1535-969d-44f5-a9d6-bfe2e1a5158c


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

  • [x] 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.
  • [x] Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
  • [x] 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 27 '24 15:08 joshheald

2 Warnings
:warning: View files have been modified, but no screenshot or video is included in the pull request. Consider adding some for clarity.
:warning: This PR is assigned to the milestone 20.2. This milestone is due in less than 2 days.
Please make sure to get it merged by then or assign it to a milestone with a later deadline.

Generated by :no_entry_sign: Danger

dangermattic avatar Aug 27 '24 15:08 dangermattic

Only the AppCenter upload failed, retrying the build

joshheald avatar Aug 28 '24 07:08 joshheald

WooCommerce iOS📲 You can test the changes from this Pull Request in WooCommerce iOS by scanning the QR code below to install the corresponding build.

App NameWooCommerce iOS WooCommerce iOS
Build Numberpr13753-6e539e0
Version20.1
Bundle IDcom.automattic.alpha.woocommerce
Commit6e539e046edc1bb1bc384497e87d21d1243e8f16
App Center BuildWooCommerce - Prototype Builds #10641
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

wpmobilebot avatar Aug 28 '24 08:08 wpmobilebot