Domains: Add headings to terms section in checkout

[matt-west]

Quick summary

When purchasing a domain and email plan using a promotion, we display some terms explaining when the user will start paying for these items at the bottom of the checkout. The text used is very similar for domains and email plans.

We should include headings for "Domain" and "Email" to make it easier to read the content in the terms section.

Steps to reproduce

1. Upgrade to a Business plan
2. Add a free domain to cart
3. Add an email plan with the 3 month trial to cart
4. Go to checkout
5. Navigate to the "By checkout out" section at the bottom of the page

What you expected to happen

The terms should have sub-headings to make it easier for users to read.

What actually happened

There’s just a single wall of test with no hierarchy.

Impact

One

Available workarounds?

No but the platform is still usable

If the above answer is "Yes...", outline the workaround.

No response

Platform (Simple and/or Atomic)

No response

Logs or notes

No response

[stephanethomas]

That seems like a very good idea. Let's see what @Automattic/shilling thinks of that.

[sirbrillig]

You mean the "The promotional period for your X lasts from..." text? I personally feel like the wording Domain Registration and Professional Email make it pretty clear which one is for which, but maybe you're referring to all the different terms.

Certainly the text itself could be adjusted to make it more clear but we've already spent a lot of time trying to shrink those paragraphs (most recently https://github.com/Automattic/wp-calypso/pull/87554, https://github.com/Automattic/wp-calypso/pull/88328, and https://github.com/Automattic/wp-calypso/pull/88567) and at the same time make sure they include all the relevant information, so whatever you add it would be best to try to keep it very short or rework the text to remove something when you add it. We get frequent requests to remove, hide, or otherwise deemphasize this section of checkout since it takes up so much space, particularly for domains with email, but it's also legally required, so it's a difficult line to walk.

Can you make a simple mockup of what you had in mind?

[matt-west]

Thanks for the additional context @sirbrillig!

Taking that into account, perhaps we could just bold the "Domain Registration" and "Professional Email" text within the paragraphs rather than adding new headings. That will still help emphasise the differences between the paragraphs, but it’s subtler than using a heading.

[sirbrillig]

Thank you. Yes! That would be a pretty lightweight change that wouldn't affect the current size of checkout. I've added it to be prioritized to the Shilling team board, but if there's someone else who'd like to make the change, they're very welcome to do so.

The string in question is here:

https://github.com/Automattic/wp-calypso/blob/0f5aaa442b98c81ead664b30d8d19921cbb97f1c/client/my-sites/checkout/src/components/additional-terms-of-service-in-cart.tsx#L107