Launchpad: Add domain ssl processing notification

[jeyip]

Proposed Changes

• Show a notification message underneath the domains preview noting that it is in the process of being set up

Screenshots

Testing Instructions

• Check out this PR
• Create new site through tailored flow https://wordpress.com/hp-2022-tailored-flows/
• Make sure to switch out wordpress.com with calypso.localhost:3000
• Create a custom domain for the site
• Choose, at minimum, a personal plan ( so that we can make a custom domain the primary domain )
• Complete steps until at the Launchpad screen
• Verify that there is a domain ssl processing notification until ssl is active on the custom domain

Pre-merge Checklist

• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?

Related to #68967

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-47228

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-47228&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~75 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
entry-stepper       +138 B  (+0.0%)      +75 B  (+0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[edanzer]

UPDATE: Issue above with free .wordpress.com domains showing the message has been resolved.

• Set up new site with custom domain and confirmed new message appears initially.
• Set up free site (*.wordpress.com domain) to confirm the message does NOT show. From what I'm seeing, the new message still shows. I don't think that's expected.
  • Just quickly checking the code to see what's happening, the sslStatus variable seems to be null for my new wordpress.com domain.

[jeyip]

Set up free site (*.wordpress.com domain) to confirm the message does NOT show. From what I'm seeing, the new message still shows. I don't think that's expected.

Thanks for the patience with this @edanzer. I pushed a fix with tests to cover the null case

[agrullon95]

LGTM.

• Tested with existing free domain & paid domain : SSL notification message does not display in sidebar.
• Tested with new paid domain on personal plan: SSL notification message displays in sidebar while custom domain SSL status is pending.

[bstoynov]

Changes look good and this tests well.

Testing

✔️ Notification is showing when using a pain domain with a personal plan while domain is pending
✔️ Notification is not showing when using a free domain

[Addison-Stavlo]

Regarding the notification - are we able to add the circle green check icon and corresponding text offset as shown in the similar design here ?

[kirahsapong]

Changes look good except for the green checkmark @Addison-Stavlo noted above.

Testing

[x] Notification shows with new custom domain
[x] Notification does not show with existing custom domain
[x] Notification does not show with any [site].wordpress.com domain
[ ] Design matches mock-up

[jeyip]

Regarding the notification - are we able to add the circle green check icon and corresponding text offset as shown in the similar design #68967 (comment) ?

I wasn't certain if we wanted to add the icon as well, but I'm happy to do so in a follow-up

[edanzer]

Changes look good. Retested this after recent changes, and tests as expected. The issue I noted above with free .wordpress.com domains showing the new message is resolved. I also ran the unit tests, and they are all passing.

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/7596273

Thank you @jeyip for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.