Plans: Add expired state to PlanStatus

[drewblaisdell]

Addresses part of #1471.

Testing

• Visit http://calypso.localhost:3000/plans/:site for a site with a trial that is in the grace period (within three days of expiring).
• If there are three days left, assert that the notice reads 'EXPIRED TODAY', and that the remaining time text reads 'Plan features will be removed in 3 days'.
• If there are two days left, assert that the notice reads 'EXPIRED 1 DAY AGO', and that the remaining time text reads 'Plan features will be removed in 2 days'.
• If there is one day left, assert that the notice reads 'EXPIRED 2 DAYS AGO', and that the remaining time text reads 'Plan features will be removed in 1 day'.
• If it is the day of the expiry, assert that the notice reads 'EXPIRED 3 DAYS AGO', and that the remaining time text reads 'Plan features will be removed momentarily'.

Reviews

• Code
• Product

[drewblaisdell]

@Tug The issue we encountered during the meetup is simplified a little bit by:

• Ensuring that all moments (those in this assembler and the current moment calculated with moment()) are set to the start of the day.
• Using moment().startOf( 'day' ) instead of moment().set( { hour: 0, ... } ) each time.

[drewblaisdell]

This has been rebased to pull in changes from #1708 and is ready for review.

[stephanethomas]

What about the following simpler approach?

export function isInGracePeriod( plan ) {
 return ( getDaysUntilUserFacingExpiry( plan ) <= 0 ) && ( getDaysUntilExpiry( plan ) >= 0 );
}

[stephanethomas]

I guess this shouldn't happen since the subscription would probably have been removed at that point (well, I'm not quite sure about that) but I've noticed the following display bug once the grace period is over:

[stephanethomas]

I added a few remarks but otherwise this works as advertised.

[drewblaisdell]

Thanks for looking at this, @stephanethomas. I updated the commits to address your feedback with the following changes:

• Updated the syntax of isInGracePeriod.
• Switched to use days instead of daysUntilUserFacingExpiry in renderNotice.
• Updated the syntax of the notice text definition in renderNotice.
• Updated PlanStatusProgress to handle the case where the trial was not removed. Ideally, users shouldn't ever be in this state, but it is easy enough to handle.

[ghost]

LGTM - only concern is the styling.
Even with a max-viewport window, the text takes up two lines:

It looks a lot better in the mockup above, with the text on a single line (WordPress.com Premium Free Trial)

[Tug]

Some margin must have been added or something, so it wasn't fitting into one line in english.
I fixed that by decreasing the font size a little bit

Also added some comment and reviewed the code 👍 LGTM

[stephanethomas]

I really don't think we should change the size of the font to avoid having two lines of text. I bet it's longer in French and in other languages. If this is really an issue, we should prevent it from wrapping using the appropriate CSS property and take advantage of the flexbox layout to move the button below if there is no space left.

[mikeshelton1503]

For the font-size, the original intended size was 21px so that should fix the English version at max-width. Sorry I should have indicated that originally.

For other languages it may still wrap but I'm ok with this. Stephane's suggestion could work too but we're not gaining too much with that method because the overall height of the section would be taller so it would just be a trade off of evils.

[drewblaisdell]

I updated @Tug's commit to change the font size to 21px. 👍 The font size isn't an issue related to this PR, so we can handle any other changes separately.