Blocks: Introduce a ProductPlanOverlapNotices block

[tyxla]

Changes proposed in this Pull Request

• Blocks: Introduce a ProductPlanOverlapNotices block

Preview

Testing instructions

• Checkout this branch.
• On a Jetpack site, get a Jetpack Backup product.
• On that Jetpack site, get a Jetpack plan too.
• Go to http://calypso.localhost:3000/devdocs/blocks/product-plan-overlap-notices
• Pick that Jetpack site from the site picker.
• Verify you can see a notice as shown on the screenshot, and that notice is correct.

[matticbot]

Test live: https://calypso.live/?branch=add/product-plan-overlap-notices-block

[matticbot]

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

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

name                 parsed_size           gzip_size
entry-main                 +46 B  (+0.0%)      +19 B  (+0.0%)
entry-login                +46 B  (+0.0%)       +9 B  (+0.0%)
entry-gutenboarding        +46 B  (+0.0%)       +8 B  (+0.0%)

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

Async-loaded Components (~565 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
async-load-design-blocks      +2973 B  (+0.1%)     +565 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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.

[enejb]

This was a bit hard to test, but overall I really like the implementation.

There is something that are not quite accurate.
Currently I was able to see the following.

The current Personal plan doesn't have Realtime backups but just daily backups.
I don't have a suggestion but the copy could also use some ❤️ . Does it need to be so verbose?

[delawski]

I've reviewed the code and left a couple of minor comments. I'm going to test it locally next.

[tyxla]

The current Personal plan doesn't have Realtime backups but just daily backups.

Nice catch @enejb! Should be fixed with 444acf3 - could you give it another spin?

[tyxla]

Thanks for the great catches @delawski and @enejb - addressed what you folks reported. Would appreciate another 👀

[delawski]

I've tested locally and while I'm seeing the notification when I'm owning the Real-Time option, there is no message displayed if I have the Daily Backup in conjunction with Jetpack Personal or Premium plan.

@tyxla could you double check if those combinations work for you or is it some issue on my end only?

[tyxla]

@delawski thanks for testing - the problem here is not related with my code; it's coming from the WP.com store - it doesn't allow having a Personal or Premium plan together with the Daily backup product. If you try purchasing one of them while having the other, the existing plan or product will get automatically canceled in favor of the new plan or product. Take a look at your purchases page or your SA and you will notice that you only have a single product or plan.

AFAIK, this is something that @Automattic/chronos are aware of (cc @seear and @rcoll), but I'm not sure if it's actively being worked on.

Since the logic in the code is generic, it should work for other cases like this, as long as the store allows it and the purchases endpoint returns both a plan and a product purchase.

If you really want to test it, you can force the getSitePurchases selector to return an additional dummy purchase for a product while you're on a plan.

Let me know how that goes, but I'd really love to push this forward if it works for cases that the store currently supports.

Issue is not related with this PR and with Calypso in general.

[delawski]

@tyxla Thank you for explaining where the issue I noticed come from! In this case I think this is good to go! Let's 🚢

[enejb]

While tested this and I found that when a site has the daily backup and the professional plan we don't show the notice at all in this case.

I am not sure if this should be addressed in a different PR or this one?
Since that type of nice is a bit different then the current overlap notice.

[tyxla]

I think it's just a different type of overlap, but we can address it in a subsequent PR. I'll ship.

Thank you guys 💪