[POS][Custom payment UI] – Payment processing animation with Lottie #13100

samiuelson · 2024-12-10T15:55:10Z

Animated payment states with Lottie

~~⚠️ Don't merge until base is trunk~~

Closes: #13068
Closes: #12826

Description

This PR adds animations for payment states:

Collecting
Capturing
Processing

See the video below.

Decision on introducing Lottie: p1733860533372109-slack-C070SJRA8DP

Steps to reproduce

Go to Woo POS (Menu more > Point of Sale)
Add items to cart and click "Checkout"
Proceed with payment flow
Observe animated "card" icon

Testing information

Animation should be visible in Totals pane when the reader is ready (payment Collecting state)
Animation should be displayed in fullscreen in processing and capturing states

Design specs: TfaZ4LUkEwEGrxfnEFzvJj-fi-2710_118241
Animation specs: p6riRB-aNq-p2

The tests that have been performed

I tested the payment collection in POS and tried tuning up the animation to match specs as much as possible in reasonable time constraints.

Images/gif

Screen_recording_20241211_154058.mp4

I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

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 big (tablet) and small (phone) in case of UI changes, and no regressions are added.

dangermattic · 2024-12-10T15:56:03Z

	1 Warning
⚠️	This PR is larger than 300 lines of changes. Please consider splitting it into smaller PRs for easier and faster reviews.

Generated by 🚫 Danger

wpmobilebot · 2024-12-10T15:59:17Z

Project dependencies changes

The following changes in project dependencies were detected (configuration vanillaReleaseRuntimeClasspath):

list

New Dependencies
com.airbnb.android:lottie:5.2.0
com.airbnb.android:lottie-compose:5.2.0

tree

+\--- com.airbnb.android:lottie-compose:5.2.0
+     +--- com.airbnb.android:lottie:5.2.0
+     |    +--- androidx.appcompat:appcompat:1.3.1 -> 1.6.1 (*)
+     |    \--- com.squareup.okio:okio:1.17.4 -> 3.7.0 (*)
+     +--- org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.6.10 -> 1.9.10 (*)
+     +--- androidx.compose.foundation:foundation:1.1.1 -> 1.6.5 (*)
+     \--- androidx.compose.ui:ui:1.1.1 -> 1.6.5 (*)

wpmobilebot · 2024-12-10T16:03:58Z

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

	App Name	WooCommerce-Wear Android
	Platform	⌚️ Wear OS
	Flavor	Jalapeno
	Build Type	Debug
	Commit	`bbf8fbe`
	Direct Download	`woocommerce-wear-prototype-build-pr13100-bbf8fbe.apk`

wpmobilebot · 2024-12-10T16:13:59Z

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

	App Name	WooCommerce Android
	Platform	📱 Mobile
	Flavor	Jalapeno
	Build Type	Debug
	Commit	`bbf8fbe`
	Direct Download	`woocommerce-prototype-build-pr13100-bbf8fbe.apk`

codecov-commenter · 2024-12-11T12:27:25Z

Codecov Report

Attention: Patch coverage is 64.28571% with 5 lines in your changes missing coverage. Please review.

Project coverage is 40.26%. Comparing base (ec2b4ab) to head (bbf8fbe).

Files with missing lines	Patch %	Lines
.../android/ui/woopos/common/composeui/WooPosTheme.kt	0.00%	3 Missing ⚠️
...oid/ui/woopos/home/totals/WooPosTotalsViewModel.kt	81.81%	2 Missing ⚠️

Additional details and impacted files

@@                                 Coverage Diff                                  @@
##             custom-payment-ui-6-use-payment-controller-in-pos   #13100   +/-   ##
====================================================================================
  Coverage                                                40.26%   40.26%           
- Complexity                                                6081     6082    +1     
====================================================================================
  Files                                                     1273     1273           
  Lines                                                    73987    73988    +1     
  Branches                                                 10123    10124    +1     
====================================================================================
+ Hits                                                     29792    29794    +2     
- Misses                                                   41611    41612    +1     
+ Partials                                                  2584     2582    -2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

* given order draft created and reader connected, when payment is processed, should show processing state * given order draft created and reader connected, when payment is captured, should show processing state

samiuelson · 2024-12-11T15:00:20Z

...merce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/WooPosTotalsViewModel.kt

@@ -260,6 +256,8 @@ class WooPosTotalsViewModel @Inject constructor(
                        childrenToParentEventSender.sendToParent(ChildToParentEvent.PaymentFailed)
                    }

+                    CardReaderPaymentState.ReFetchingOrder -> Unit


💡 ReFetchingOrder state is emitted after PaymentSuccess state on which we show Payment success screen. ReFetchingOrder indicates the order is synced in DB. We want to ignore it in POS.

samiuelson · 2024-12-11T15:02:38Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/home/totals/WooPosTotalsScreen.kt

+    LottieAnimation(
+        modifier = Modifier.size(256.dp),
+        composition = tapCardAnimation,
+        clipSpec = LottieClipSpec.Markers("reader_awaiting_start", "reader_awaiting_end"),


💡 Marker names refer to makers[] table from woopos_card_ilustration.json file and point to animation frames we loop animation between.

samiuelson added 3 commits December 10, 2024 15:23

Show subtitles for processing and capturing states

6a6be05

Show lottie animations for payment capturing and processing

052db51

Revert accidental gradle.properties changes

f919b57

Animate "reader ready" state in Totals

4de5bae

samiuelson changed the title ~~[POS][Custom payment UI] – Payment processing animation~~ [POS][Custom payment UI] – Payment processing animation with Lottie Dec 10, 2024

samiuelson added 3 commits December 11, 2024 12:19

Revert accidental change to gradle.properties

54e65c6

Revert accidental change to gradle.properties

b183afb

Update unit tests

d82111c

samiuelson added 6 commits December 11, 2024 13:48

Add tests:

2f4ab2e

* given order draft created and reader connected, when payment is processed, should show processing state * given order draft created and reader connected, when payment is captured, should show processing state

Add payment processing screen enter animation

0866ff8

Satisfy detekt's complaints

bebd92a

Tune up animation

f388120

Clean up code

d79fe17

Clean up tests

7d0bbf0

samiuelson requested review from AnirudhBhat and malinajirka December 11, 2024 14:50

samiuelson marked this pull request as ready for review December 11, 2024 14:50

samiuelson added 2 commits December 11, 2024 15:55

Remove redundant code

8768414

Remove redundant code

9171931

samiuelson commented Dec 11, 2024

View reviewed changes

Satisfy detekt's complaints

a16613c

samiuelson added the status: do not merge Dependent on another PR, ready for review but not ready for merge. label Dec 11, 2024

samiuelson added this to the 21.3 milestone Dec 11, 2024

Base automatically changed from custom-payment-ui-loading-animation to custom-payment-ui-6-use-payment-controller-in-pos December 11, 2024 17:29

samiuelson removed the status: do not merge Dependent on another PR, ready for review but not ready for merge. label Dec 11, 2024

Merge branch custom-payment-ui-6-use-payment-controller-in-pos

bbf8fbe

samiuelson added the feature: point of sale POS project label Dec 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[POS][Custom payment UI] – Payment processing animation with Lottie #13100

[POS][Custom payment UI] – Payment processing animation with Lottie #13100

samiuelson commented Dec 10, 2024 •

edited

Loading

dangermattic commented Dec 10, 2024 •

edited

Loading

wpmobilebot commented Dec 10, 2024

wpmobilebot commented Dec 10, 2024 •

edited

Loading

wpmobilebot commented Dec 10, 2024 •

edited

Loading

codecov-commenter commented Dec 11, 2024 •

edited

Loading

samiuelson Dec 11, 2024 •

edited

Loading

samiuelson Dec 11, 2024

[POS][Custom payment UI] – Payment processing animation with Lottie #13100

Are you sure you want to change the base?

[POS][Custom payment UI] – Payment processing animation with Lottie #13100

Conversation

samiuelson commented Dec 10, 2024 • edited Loading

Animated payment states with Lottie

Description

Steps to reproduce

Testing information

The tests that have been performed

Images/gif

Reviewer (or Author, in the case of optional code reviews):

dangermattic commented Dec 10, 2024 • edited Loading

wpmobilebot commented Dec 10, 2024

Project dependencies changes

wpmobilebot commented Dec 10, 2024 • edited Loading

wpmobilebot commented Dec 10, 2024 • edited Loading

codecov-commenter commented Dec 11, 2024 • edited Loading

Codecov Report

samiuelson Dec 11, 2024 • edited Loading

Choose a reason for hiding this comment

samiuelson Dec 11, 2024

Choose a reason for hiding this comment

samiuelson commented Dec 10, 2024 •

edited

Loading

dangermattic commented Dec 10, 2024 •

edited

Loading

wpmobilebot commented Dec 10, 2024 •

edited

Loading

wpmobilebot commented Dec 10, 2024 •

edited

Loading

codecov-commenter commented Dec 11, 2024 •

edited

Loading

samiuelson Dec 11, 2024 •

edited

Loading