Shipping Labels Onboarding - Installation process screen + animations

[JorgeMucientes]

As part of the Shipping Labels Onboarding project, we should implement the most complex screen of the flow, which is the the installation of the extension. It would be great, if we implement this screen in a way that is reusable in the future for the installation of other plugins.

This screen present a complexity given by the animations and transitions of the elements on the view.

This is a video of the animation of the view:

https://user-images.githubusercontent.com/2663464/170060466-abfe2a47-622c-46d7-be7e-72a58fd4753f.mp4

One slight change the video demo, the circular progress won't work as a progress bar but as an infinite loading spinner.

• [ ] Add Initial screen
• [ ] Add installation animation
• [ ] Once installed check that order is eligible for Shipping Labels through the API request done to WC Shipping plugin
• [ ] Add final screen with CTA to create a new shipping label for the order. This CTA will only be visible if the order is eligible for SL which requires a request to the API. This request can be done as part of the installation flow.

[joe-keenan]

As part of M1, we will not implement the "Create Shipping Label" button, but there will be another button for showing to the user how Shipping Labels works.

Oh, I thought we were still going to have the Create Shipping Label button. At the end of the Milestone 1 section in your post, you seemed to indicate that we’d only show the screen with this button on it, then follow that up with the onboarding modal. I thought we’d add a link to this screen for the how-to, rather than taking anything away. Please let me know if the plans have changed so I know what my limitations are when I redesign this screen. Cheers!

[JorgeMucientes]

I thought we were still going to have the Create Shipping Label button

We are! Sorry for the misunderstanding @joe-keenan . Hope everything's clear in the P2 discussion. I've updated this issue description. We will display the final screen as it is in the video and we will add a link to "How to print SL" or apply any small updates you consider relevant.

[joe-keenan]

Awesome, thanks for clarifying that for me @JorgeMucientes!