Shipping Labels Onboarding: Installation UI #6811

hichamboushaba · 2022-06-24T16:50:16Z

Part of: #6587

Description

This PR adds the installation UI, with the animations for the transition from the pre-install step, the changes required some refactorings, as I'm learning about Compose animation APIs, and I found out that the usage of animateEnterExit made the code a bit cleaner.

The additional change is replacing the cancel button with a cross-icon as this was confirmed by the design team.

NB: the installation itself is not implemented yet.

Testing instructions

Make sure your store is in US, and uses USD as the currency, but doesn't have WCShip.
Create an order eligible for shipping label creation (ie: not virtual/downloadable and not eligible for IPP).
Open the order in the app.
Click on the "Get WooCommerce Shipping" button.
Click on "Add extension" to the store.
Click on "Proceed with installation".
Confirm the animation and transition look and work as expected.

You can also run the preview PreviewInstallWCShippingScreen if you want to jump directly into the screen.

Images/gif

Screen.Recording.2022-06-27.at.19.10.16.mov

I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

peril-woocommerce · 2022-06-24T16:50:21Z

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

wpmobilebot · 2022-06-24T17:02:50Z

You can test the changes on this Pull Request by downloading an installable build, or scanning this QR code:

codecov-commenter · 2022-06-24T17:05:28Z

Codecov Report

Merging #6811 (0fbd272) into trunk (754675a) will decrease coverage by 0.26%.
The diff coverage is 0.00%.

@@             Coverage Diff              @@
##              trunk    #6811      +/-   ##
============================================
- Coverage     44.91%   44.65%   -0.27%     
  Complexity     2966     2966              
============================================
  Files           533      533              
  Lines         29187    29359     +172     
  Branches       3861     3879      +18     
============================================
  Hits          13109    13109              
- Misses        14861    15033     +172     
  Partials       1217     1217

Impacted Files	Coverage Δ
...merce/android/ui/shipping/InstallWCShippingFlow.kt	`0.00% <0.00%> (ø)`
...android/ui/shipping/InstallWCShippingOnboarding.kt	`0.00% <0.00%> (ø)`
.../android/ui/shipping/InstallWCShippingViewModel.kt	`0.00% <0.00%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 754675a...0fbd272. Read the comment docs.

It causes issues as the value is remembered beyond the scope of the step itself

This avoid restarting them on screen rotation

hichamboushaba · 2022-06-27T18:15:09Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/shipping/InstallWCShippingFlow.kt

-        if (it) 0 else 120
-    } ?: remember { mutableStateOf(0) }
-
+private fun AnimatedVisibilityScope.PreInstallationContent(viewState: InstallationState.PreInstallation) {


Scoping the composables to AnimatedVisibilityScope gives us access to the animateEnterExit modifier, which is quite helpful for composing child animations, and not just relying on the AnimatedContent animation itself.

hichamboushaba · 2022-06-27T18:16:43Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/shipping/InstallWCShippingFlow.kt

+            )
+    ) {
+        // fill equivalent space as the cross-icon
+        Spacer(modifier = Modifier.height(dimensionResource(id = R.dimen.major_300)))


I'm using Spacers to account for the space of the contents of other steps, this is needed to have a smooth animation where views don't jump from their positions.
If you know of a better approach, please suggest it 🙏.

Hmm, setting the InstallationLoadingIndicator at a fixed margin from the top would the the trick I guess. But then you wouldn't be able to use Spacers with weight for a better distribution of the available space. So I think this approach is perfectly fine and easy to follow with the comment indicating why the extra spacing is needed for each of the cases were you've had to add these.

hichamboushaba · 2022-06-27T18:18:40Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/shipping/InstallWCShippingViewModel.kt

+            step.filter { it == Installation }
+                .first()
+
+            // TODO launch plugin installation


We can here launch the installation then listen to its state to update the step, and since step is saved to the SavedStateHandle, a restoration after a process death for example would restart the installation if it was the step we were in before, which is what we need.

JorgeMucientes · 2022-06-28T17:54:13Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/shipping/InstallWCShippingFlow.kt

+    val circleColor = colorResource(id = R.color.woo_purple_20)
+    val progressColor = colorResource(id = R.color.woo_purple_50)


Np, but maybe we should add a "semantic" color for these inside values/colors_base.xml instead of referencing directly colors from wc_colors_base.

I'll keep the usage as is for now, as I don't have a good name to name them besides the woo_purple_... 😄.
We can always fix it later.

JorgeMucientes · 2022-06-28T18:01:11Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/shipping/InstallWCShippingFlow.kt

+            )
+    ) {
+        // fill equivalent space as the cross-icon
+        Spacer(modifier = Modifier.height(dimensionResource(id = R.dimen.major_300)))


Hmm, setting the InstallationLoadingIndicator at a fixed margin from the top would the the trick I guess. But then you wouldn't be able to use Spacers with weight for a better distribution of the available space. So I think this approach is perfectly fine and easy to follow with the comment indicating why the extra spacing is needed for each of the cases were you've had to add these.

JorgeMucientes · 2022-06-28T18:03:01Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/shipping/InstallWCShippingFlow.kt

+}
+
+@Composable
+private fun InstallationInfoLink(onClick: () -> Unit, modifier: Modifier = Modifier) {


Np, the modifier param here is unused. it should be added to the Row container.

Nice catch, fixed in 619a9b7

JorgeMucientes · 2022-06-28T18:09:26Z

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/shipping/InstallWCShippingFlow.kt

 import com.woocommerce.android.ui.shipping.InstallWCShippingViewModel.ViewState.InstallationState.PreInstallation

+@OptIn(ExperimentalTransitionApi::class)


I think you can remove this. AS states no experimental API is in use here.

Nice catch too, I removed it, it was a leftover from the previous iteration.

JorgeMucientes · 2022-06-28T18:13:30Z

Awesome job @hichamboushaba 🙌🏼 This was not an easy animation to achieve. Looks really great!
I left a couple of minor nitpicks, feel free to apply them, other than that ready to 🚢

peril-woocommerce · 2022-06-29T09:59:11Z

	Warnings
⚠️	PR has more than 300 lines of code changing. Consider splitting into smaller PRs if possible.

Generated by 🚫 dangerJS

hichamboushaba · 2022-06-29T10:01:35Z

Thanks @JorgeMucientes for the review.

hichamboushaba added 4 commits June 23, 2022 16:51

Replace the cancel button with a cross icon

b23c574

Add an installation state and refactor how animations work

706788c

Animation between pre-install and install screens

55fee2c

Add a TODO comment about starting the installation

c150bf4

hichamboushaba added feature: shipping labels Related to creating, ordering, or printing shipping labels. type: enhancement A request for an enhancement. labels Jun 24, 2022

hichamboushaba added 7 commits June 24, 2022 20:30

Use None as parent animation between pre-install and installation

136668a

Adjust animation durations

85d9ca3

Remove unused imports

71d529d

Add animation for the loading indicator

2b3618b

Improve the extension and site name animation

946f23a

Remove the usages of the rememberSaveable

939d6cd

It causes issues as the value is remembered beyond the scope of the step itself

Link arrow animations to the transition

416ed0e

This avoid restarting them on screen rotation

hichamboushaba added this to the 9.6 milestone Jun 27, 2022

hichamboushaba requested a review from JorgeMucientes June 27, 2022 18:13

hichamboushaba marked this pull request as ready for review June 27, 2022 18:13

hichamboushaba commented Jun 27, 2022

View reviewed changes

hichamboushaba changed the title ~~Shipping Labels Onboarding: Installation UI (part 1)~~ Shipping Labels Onboarding: Installation UI Jun 27, 2022

JorgeMucientes self-assigned this Jun 28, 2022

JorgeMucientes approved these changes Jun 28, 2022

View reviewed changes

hichamboushaba added 2 commits June 29, 2022 10:55

Fix usage of the modifier argument

619a9b7

Cleanup the usages of the OptIn

0fbd272

hichamboushaba enabled auto-merge June 29, 2022 10:01

hichamboushaba merged commit 806e2df into trunk Jun 29, 2022

hichamboushaba deleted the issue/6587-installation-UI branch June 29, 2022 10:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Shipping Labels Onboarding: Installation UI #6811

Shipping Labels Onboarding: Installation UI #6811

hichamboushaba commented Jun 24, 2022 •

edited

Loading

peril-woocommerce bot commented Jun 24, 2022 •

edited

Loading

wpmobilebot commented Jun 24, 2022 •

edited

Loading

codecov-commenter commented Jun 24, 2022 •

edited

Loading

hichamboushaba Jun 27, 2022

hichamboushaba Jun 27, 2022

JorgeMucientes Jun 28, 2022

hichamboushaba Jun 27, 2022

JorgeMucientes Jun 28, 2022

hichamboushaba Jun 29, 2022

JorgeMucientes Jun 28, 2022

JorgeMucientes Jun 28, 2022

hichamboushaba Jun 29, 2022

JorgeMucientes Jun 28, 2022

hichamboushaba Jun 29, 2022

JorgeMucientes commented Jun 28, 2022

peril-woocommerce bot commented Jun 29, 2022

hichamboushaba commented Jun 29, 2022

		val circleColor = colorResource(id = R.color.woo_purple_20)
		val progressColor = colorResource(id = R.color.woo_purple_50)

		import com.woocommerce.android.ui.shipping.InstallWCShippingViewModel.ViewState.InstallationState.PreInstallation

		@OptIn(ExperimentalTransitionApi::class)

Shipping Labels Onboarding: Installation UI #6811

Shipping Labels Onboarding: Installation UI #6811

Conversation

hichamboushaba commented Jun 24, 2022 • edited Loading

Description

Testing instructions

Images/gif

peril-woocommerce bot commented Jun 24, 2022 • edited Loading

wpmobilebot commented Jun 24, 2022 • edited Loading

codecov-commenter commented Jun 24, 2022 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JorgeMucientes commented Jun 28, 2022

peril-woocommerce bot commented Jun 29, 2022

hichamboushaba commented Jun 29, 2022

hichamboushaba commented Jun 24, 2022 •

edited

Loading

peril-woocommerce bot commented Jun 24, 2022 •

edited

Loading

wpmobilebot commented Jun 24, 2022 •

edited

Loading

codecov-commenter commented Jun 24, 2022 •

edited

Loading