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

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

Animated payment states with Lottie

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.7.1 (*)
+     \--- androidx.compose.ui:ui:1.1.1 -> 1.7.1 (*)

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	`089bc61`
	Direct Download	`woocommerce-wear-prototype-build-pr13100-089bc61.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	`089bc61`
	Direct Download	`woocommerce-prototype-build-pr13100-089bc61.apk`

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

Codecov Report

Attention: Patch coverage is 52.00000% with 12 lines in your changes missing coverage. Please review.

Project coverage is 40.45%. Comparing base (b1a4dd5) to head (089bc61).
Report is 21 commits behind head on custom-payment-ui-6-use-payment-controller-in-pos.

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

Additional details and impacted files

@@                                   Coverage Diff                                   @@
##             custom-payment-ui-6-use-payment-controller-in-pos   #13100      +/-   ##
=======================================================================================
- Coverage                                                40.45%   40.45%   -0.01%     
- Complexity                                                6217     6218       +1     
=======================================================================================
  Files                                                     1295     1295              
  Lines                                                    75136    75147      +11     
  Branches                                                 10307    10308       +1     
=======================================================================================
+ Hits                                                     30395    30397       +2     
- Misses                                                   42088    42099      +11     
+ Partials                                                  2653     2651       -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.

malinajirka

Thanks @samiuelson ! Looks great overall. I've left two unrelated comments that don't block merge of this PR.

The animations of the illustrations look great. We'll need to work on both the state transition (transition from one illustration to the other) and screen transitions. These both look significantly smoother on iOS. However, I guess these aren't part of this PR.

I'm leaving the merge to you since I'm not sure if this is dependant on another PR or can be merged immediatelly into [custom-payment-ui-6-use-payment-controller-in-pos](https://github.com/woocommerce/woocommerce-android/tree/custom-payment-ui-6-use-payment-controller-in-pos).

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

malinajirka · 2024-12-12T10:10:01Z

...e/src/test/kotlin/com/woocommerce/android/ui/woopos/home/totals/WooPosTotalsViewModelTest.kt

@@ -897,6 +866,72 @@ class WooPosTotalsViewModelTest {
        assertThat(totalState.readerStatus).isInstanceOf(WooPosTotalsViewState.ReaderStatus.ReadyForPayment::class.java)
    }

+    @Test


💬 This is not an issue with this PR since this PR is consistent with the remaining unit tests. However, I think it's something we should iterate on rather sooner than later. IMO the body of each tests should contain only changes that are affecting the result of the test.

For example, for test called given order draft created and reader connected, when payment is captured, should show processing state, the body of the test would IMO ideally prepare only order draft, reader connected, payment capture. Everything else would be setup using a single preparation method or ideally in @Before or similar. The current approach increases maintenance cost as well as makes it more time consuming to write additional tests.

If implementing such approach is difficult, it's in my experience usually a flag that the SUT is doing more than it should and should be split into smaller classes.

Wdyt?

I agree. WooPosTotalsViewModelTest got quite messy recently. I'll try to clean it up as much as possible in next PR and report an issue to team backlog if needed.

Noice, thanks so much! This should definitely be a team effort considering the tests were written by all of us, so don't hesitate spliting it into tasks.

malinajirka

I encountered this crash when adding a variation into the cart. I thought it was not related to this PR, so I reported it on Slack. However, it seems it works as expected on trunk.

Open POS
Tap on a variable product
Tap on a variation
Tap on checkout
Notice crash

FATAL EXCEPTION: main Process: com.woocommerce.android.prealpha, PID: 19229 java.lang.NullPointerException at com.woocommerce.android.ui.woopos.home.totals.WooPosTotalsRepository$createOrderWithProducts$3$2.invokeSuspend(WooPosTotalsRepository.kt:47) at kotlin.coroutines.jvm.internal.BaseContinuationImpl.resumeWith(ContinuationImpl.kt:33) at kotlinx.coroutines.DispatchedTask.run(DispatchedTask.kt:104) at kotlinx.coroutines.internal.LimitedDispatcher$Worker.run(LimitedDispatcher.kt:111) at kotlinx.coroutines.scheduling.TaskImpl.run(Tasks.kt:99) at kotlinx.coroutines.scheduling.CoroutineScheduler.runSafely(CoroutineScheduler.kt:584) at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.executeTask(CoroutineScheduler.kt:811) at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.runWorker(CoroutineScheduler.kt:715) at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.run(CoroutineScheduler.kt:702) Suppressed: kotlinx.coroutines.internal.DiagnosticCoroutineContextException: [StandaloneCoroutine{Cancelling}@686a376, Dispatchers.Main.immediate]

P.S. Maybe this branch is just out-of-date with Trunk and that's why it crashes?

samiuelson · 2024-12-12T15:54:25Z

I encountered this crash when adding a variation into the cart. I thought it was not related to this PR, so I reported it on Slack. However, it seems it works as expected on trunk.

Open POS

Tap on a variable product

Tap on a variation

Tap on checkout

Notice crash

Thanks for the review, @malinajirka. I've updated the branch with the latest trunk and verified the crash is no longer happening. I also addressed comments. Let me know what you think!

… custom-payment-ui-payment-processing-animation

malinajirka

Awesome, thanks for the follow ups! LGTM 🙇

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

malinajirka self-assigned this Dec 12, 2024

malinajirka approved these changes Dec 12, 2024

View reviewed changes

malinajirka requested changes Dec 12, 2024

View reviewed changes

samiuelson added 2 commits December 12, 2024 16:33

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

0aed6e7

Rename Processing UI state to InProgress

fadb13d

samiuelson requested a review from malinajirka December 12, 2024 15:54

samiuelson mentioned this pull request Dec 12, 2024

[POS][Custom payment UI] – Switch to Payment Controller in POS Totals | Base PR #12977

Merged

4 tasks

Merge branch 'custom-payment-ui-6-use-payment-controller-in-pos' into…

089bc61

… custom-payment-ui-payment-processing-animation

malinajirka approved these changes Dec 12, 2024

View reviewed changes

malinajirka merged commit e9d9360 into custom-payment-ui-6-use-payment-controller-in-pos Dec 12, 2024
15 checks passed

malinajirka deleted the custom-payment-ui-payment-processing-animation branch December 12, 2024 18:09

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 •

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

samiuelson Dec 11, 2024

malinajirka left a comment

malinajirka Dec 12, 2024 •

edited

Loading

samiuelson Dec 12, 2024

malinajirka Dec 12, 2024

malinajirka left a comment •

edited

Loading

samiuelson commented Dec 12, 2024

malinajirka left a comment

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

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

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

malinajirka left a comment

Choose a reason for hiding this comment

malinajirka Dec 12, 2024 • edited Loading

Choose a reason for hiding this comment

samiuelson Dec 12, 2024

Choose a reason for hiding this comment

malinajirka Dec 12, 2024

Choose a reason for hiding this comment

malinajirka left a comment • edited Loading

Choose a reason for hiding this comment

samiuelson commented Dec 12, 2024

malinajirka left a comment

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

wpmobilebot commented Dec 10, 2024 •

edited

Loading

codecov-commenter commented Dec 11, 2024 •

edited

Loading

samiuelson Dec 11, 2024 •

edited

Loading

malinajirka Dec 12, 2024 •

edited

Loading

malinajirka left a comment •

edited

Loading