Manage Purchase: Expand the notices that inform about available products for renewal

[DavidRothstein]

Changes proposed in this Pull Request

Following up on #42076, which introduced a new feature (behind a feature flag) to show information on the manage purchase pages about other purchases on the same site in some cases where they are expiring soon, this pull requests adds more comprehensive notifications (including for purchases that are auto-renewing soon also), and ensures that the message always shows pertinent information about the current purchase too, when appropriate.

The basic goal is that when viewing one purchase, users always have a way of getting information about (and taking action on) other purchases on the same site that expire or renew soon.

See also internal discussion here: pbOQVh-bC-p2

The pull request handles many cases (too many to list all here) but here are a few new ones to look at.

Multiple subscriptions on the site are auto-renewing soon:

Multiple subscriptions on the site are expiring soon (this was already there, but this pull request makes a small change to the wording to match the above):

The current subscription is auto-renewing soon, but other subscriptions are expiring soon:

Everything is auto-renewing, but the current subscription's credit card is expired (since the message refers to multiple subscriptions now, the "Update all" action takes you to https://wordpress.com/me/purchases/add-credit-card for simplicity, to update the credit card for all the subscriptions you own at once):

Since we're showing messages about other subscriptions everywhere, domain mapping subscriptions need to get these kinds of messages too (for consistency), even though they are included in the site's plan and therefore don't normally get messages of their own. Here is an example of what that looks like:

Also for consistency, the above needs to apply even when there aren't multiple subscriptions on the site expiring/renewing soon (for example, a site that only has a plan and domain mapping):

(Note there is an inconsistency between the above two screenshots where the second one doesn't have a "Renew" link. But as described in the pull request comments, we won't be solving that here.)

Testing instructions

Existing functionality:

The most important thing to test is probably to ensure that existing functionality is unchanged for the time being -- without the upgrades/upcoming-renewals-notices flag enabled, there should be no meaningful changes to the Manage Purchase behavior.

The one small exception to that is that I standardized the code that re-styles certain kinds of error messages on these pages as information messages in the case of recently-purchased monthly subscriptions (originally added in #23017) to actually apply to monthly subscriptions only. Without that fix, testing that the red error message appears for expiring subscriptions was a pain -- because it meant that you couldn't just create an annual subscription and then change its expiration date to something soon via the WordPress.com backend (you'd have had to always fake an earlier purchase date too).

New functionality:

There's a lot to test here, and I haven't tested all the combinations myself yet (I want to eventually) but to test the basics you might want to set up:

• A WordPress.com site with a plan, domain mapping, a couple domain registrations, a theme, and another purchase.
• A Jetpack site with a plan and an add-on (such as Jetpack Search).

Then, play around with changing their auto-renew settings and expiration dates and make sure the messages you see when viewing each subscription's Manage Purchase page makes sense, and that the message always gives you a way to quickly view the other upgrades that it is talking about and easily change their status in whatever way you want.

[matticbot]

Test live: https://calypso.live/?branch=update/expand-manage-purchase-notices-for-related-products

[matticbot]

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

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

name                 parsed_size           gzip_size
entry-gutenboarding       +199 B  (+0.0%)      +22 B  (+0.0%)

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

Sections (~3314 bytes added 📈 [gzipped])

name                  parsed_size           gzip_size
purchases                +11158 B  (+1.2%)    +1566 B  (+0.7%)
checkout                   +528 B  (+0.0%)      +86 B  (+0.0%)
woocommerce                +520 B  (+0.0%)     +128 B  (+0.0%)
signup                     +520 B  (+0.2%)     +130 B  (+0.2%)
export                     +520 B  (+0.3%)     +130 B  (+0.2%)
email                      +520 B  (+0.2%)     +130 B  (+0.2%)
customize                  +520 B  (+0.3%)     +130 B  (+0.3%)
accept-invite              +520 B  (+0.2%)     +130 B  (+0.2%)
themes                     +329 B  (+0.1%)      +54 B  (+0.1%)
theme                      +329 B  (+0.1%)      +54 B  (+0.1%)
stats                      +329 B  (+0.0%)      +74 B  (+0.0%)
settings-security          +329 B  (+0.1%)      +57 B  (+0.1%)
settings-performance       +329 B  (+0.1%)      +54 B  (+0.1%)
settings                   +329 B  (+0.1%)      +62 B  (+0.1%)
plans                      +329 B  (+0.1%)      +61 B  (+0.0%)
marketing                  +329 B  (+0.1%)      +62 B  (+0.1%)
jetpack-connect            +329 B  (+0.1%)      +62 B  (+0.0%)
help                       +329 B  (+0.1%)      +61 B  (+0.0%)
domains                    +329 B  (+0.0%)      +62 B  (+0.0%)
backups                    +329 B  (+0.1%)      +74 B  (+0.1%)
activity                   +329 B  (+0.1%)      +74 B  (+0.1%)
account-close              +329 B  (+0.1%)      +51 B  (+0.1%)
gutenberg-editor           +199 B  (+0.0%)      +22 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

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

name                                                      parsed_size           gzip_size
async-load-my-sites-current-site-stale-cart-items-notice       +520 B  (+1.0%)     +130 B  (+0.8%)
async-load-design                                              +520 B  (+0.0%)     +130 B  (+0.0%)
async-load-design-blocks                                       +329 B  (+0.0%)      +68 B  (+0.0%)
async-load-blocks-inline-help-popover                          +329 B  (+0.1%)      +61 B  (+0.1%)
async-load-blocks-product-plan-overlap-notices                 -270 B  (-4.0%)      -90 B  (-4.0%)
async-load-signup-steps-plans                                  -191 B  (-0.1%)      -68 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.

[danielmx-dev]

The code LGTM and after testing different scenarios it works as expected.

[fditrapani]

The screenshots look good. One small suggestion for the copy, that can be handled separately because it doesn't look like you added it here, in the case with Multiple subscriptions on the site are auto-renewing soon.

Can we change it from:

Other upgrades on this site are also scheduled to renew soon.

to:

You have other upgrades on this site that are scheduled to renew soon.

[DavidRothstein]

Can we change it from:

Other upgrades on this site are also scheduled to renew soon.

to:

You have other upgrades on this site that are scheduled to renew soon.

Yeah, we went with similar wording in some other places (regarding expiring subscriptions) but I think it actually makes sense to use the "You have other upgrades that" wording everywhere. It is more clear, since it avoids us implying that all subscriptions on their site are necessarily in the mentioned situation.

I've made the above change, and also changed the "other upgrades" wording everywhere else to use a similar pattern also.

I've updated the screenshots in this pull request to reflect the above, and also to reflect one more change (based on this comment from my original pull request writeup):

[when viewing a domain mapping associated with an expiring plan]

(I'm realizing as I write this that for consistency, the above example should maybe get a "Renew Now" link also -- I'll try to add that later.)

It actually turns out this would be a bit involved to do since we need to renew the plan (not the domain mapping that you're looking at) in that case, and the code isn't set up to easily do it. And as a practical matter, there's another bug (unrelated to this pull request) that seems to suppress those "Renew Now" links pretty often anyway.

So as an alternative for now, I've just made the name of the plan into a link that takes you to the manage purchase page for the plan, and therefore makes it easy for you to go there and renew the plan from there. I think that's consistent with what we're doing elsewhere. I also added a code comment explaining this.

[fditrapani]

Thanks for the updates @DavidRothstein! They look great.

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.