Checkout: Simplify code for rendering line item sublabel

[sirbrillig]

Line items in checkout are rendered by the CheckoutLineItem component (previously WPLineItem). They consist of several parts:

1. A product title.
2. An item sublabel that may explain the product (eg: "Mailboxes and Productivity Tools") or the price breakdown (eg: "Plan Subscription: $48 per year").
3. A price, possibly with a crossed-out amount.
4. Additional lines for certain discounts or products.

In this list the item sublabel is rendered in the following way:

• The getSublabel() function is called to generate the general text.
• Using a translate() function, the general text is combined with other text after a colon, like the billing interval.

This is a slightly strange use of a translated string since its primary purpose is layout (eg: %(premiumLabel)s %(sublabel)s: %(interval)s contains nothing really to translate). It also creates a fair amount of complexity when reading or trying to alter the sublabel since it is combined in so many different ways. This has led to confusion when devs are attempting to fix bugs or add new subtext. It's also inflexible since it means that the general text must be a string only.

Proposed Changes

In this PR we rename getSublabel() to turn it into a React component instead.

This change allows us to render it combined with other information using HTML for layout and makes its behavior more explicit.

Testing Instructions

This PR should not change how line items are rendered, so testing involves adding various products to your shopping cart and verifying that they render the same way in checkout as before this PR.

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

Sections (~166 bytes removed 📉 [gzipped])

name                               parsed_size           gzip_size
site-purchases                           -74 B  (-0.0%)      -12 B  (-0.0%)
purchases                                -74 B  (-0.0%)      -12 B  (-0.0%)
plans                                    +33 B  (+0.0%)     -149 B  (-0.0%)
jetpack-connect                          +33 B  (+0.0%)     -149 B  (-0.0%)
jetpack-cloud-pricing                    +33 B  (+0.0%)     -149 B  (-0.1%)
jetpack-cloud-plugin-management          +33 B  (+0.0%)     -149 B  (-0.0%)
jetpack-cloud-partner-portal             +33 B  (+0.0%)     -149 B  (-0.1%)
jetpack-cloud-features-comparison        +33 B  (+0.0%)     -149 B  (-0.1%)
jetpack-cloud-agency-dashboard           +33 B  (+0.0%)     -149 B  (-0.1%)
checkout                                 +13 B  (+0.0%)     -154 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 (~154 bytes removed 📉 [gzipped])

name                                              parsed_size           gzip_size
async-load-masterbar-cart-masterbar-cart-wrapper        +33 B  (+0.0%)     -149 B  (-0.5%)
async-load-calypso-my-sites-checkout-modal              +13 B  (+0.0%)     -154 B  (-0.0%)
async-load-calypso-blocks-editor-checkout-modal         +13 B  (+0.0%)     -154 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.

[sirbrillig]

One thing I want to check before putting this up for review: does this change how the sublabel renders in RTL languages? or languages with word orders significantly different from English?

[sirbrillig]

I added fallback translations for the modified strings to make sure that this looks right in different languages.

Before/after in JP:

Before/after in HE:

[a8ci18n]

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

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

[a8ci18n]

Translation for this Pull Request has now been finished.