Plans: Clarify discount is for first year

[obenland]

This PR adds a way to specify copy for discounted plans for each plan. The plan header now displays the correct copy, based on whether it’s a discounted plan or not.

I decided to add an additional function to each plan to return the appropriate string similar to getBillingTimeFrame rather than doing it in the conditional of client/my-sites/plan-features/header.jsx. This way they can be controlled more granularly and in parallel with other time frames.

Fixes #10467.

[matticbot]

Test live: https://calypso.live/?branch=update/plans-strings

[gwwar]

Thanks @obenland, it looks like we missed passing a prop to the mobile header:

Hmm the text here seems a bit cramped. cc @sararosso or @iamtakashi for more ideas

[gwwar]

👍 code/behavior looks good here, let's see if we can get a bit more help with the copy.

[sararosso]

Smaller font size? :) Not sure how we could say this shorter/more distinct. 😕

monthly for 12 months, billed yearly

[iamtakashi]

To accommodate longer copies, we should make the copies go multiple lines if they need to. Even though if we come up with a little shorter copy, it could overflow with some other languages.

If we want to make it flexible, we'll need to tweak the CSS, and we'll need to move the plan specific CSS classes to keep the coloured border line-up though.

[gwwar]

@obenland maybe let's try and allow that to break to two lines since we will probably have longer translations for i18n. Just be sure to check if it looks ok in this table view, mobile view, and with a Jetpack connected site.

[obenland]

This is not working fantastically either. Maybe we should consider a popover?

[gwwar]

It's possible to get the headers aligned by moving the time text to another component in a new table row, but will require some refactoring.

@obenland do you mind using dev tools to make the other two columns align and take a screenshot? Let's check and see if it looks ok before we do that.

[gwwar]

Maybe we should consider a popover?

Do you mean like an info popover when we hover on the price amount? That could work too.

cc @iamtakashi or @sararosso what do you think

[sararosso]

I think a popover would be fine legally, we might want to check with @jennyzhu.

[jennyzhu]

From a legal perspective, we mention that the fees may change at renewal time:

Unless you notify Automattic before the end of the applicable subscription period that you want to cancel an Upgrade, your Upgrade subscription will automatically renew and you authorize us to collect the then-applicable annual or monthly subscription fee for such Upgrade.

But if we want this to be clear, I don't think a popover is the best approach. As a user, I wouldn't expect that I'd need to hover for more pricing info, esp since we don't seem to do that anywhere else in our pages/UI? I could be mistaken though!

[obenland]

The above would entail quite a significant refactoring to make it work

[obenland]

As a user, I wouldn't expect that I'd need to hover for more pricing info, esp since we don't seem to do that anywhere else in our pages/UI?

It could just be the part that says the discount is only applicable for the first year, not all of it.
There are 29 additional popovers on that page, none for pricing details however, that is correct.

[gwwar]

Thanks @obenland for testing that. Let's avoid the refactoring approach for now, the whitespace there looks a bit distracting.

Maybe just per month, billed yearly with an info icon next to it?

[jennyzhu]

There are 29 additional popovers on that page

Oh geez! Sorry and thanks for pointing out. I totally never noticed those (prob because I'm not scrutinizing the details of each plan, not because they're not apparent).

Maybe just per month, billed yearly with an info icon next to it?

With an info icon would be much better, IMO.

[obenland]

With added info icon:

Copy:

@sararosso @jennyzhu @gwwar How is that?

[gwwar]

This looks good to me and tests well. If folks are ok with the compromise, let's

Note that the second click for any info popover appears in the wrong direction. We can fix this in a future PR. cc @retrofox

[retrofox]

Note that the second click for any info popover appears in the wrong direction. We can fix this in a future PR. cc @retrofox

it happens from the first time btw.

[retrofox]

Related PR: #10708