The core goal of this PR is to add pricing and proration details to the Email quantity selection UI, as both pieces of information were missing.
Before diving into the approach, it’s worth describing the four possible situations we can have (though two are effectively the same):
The user doesn’t have an Email subscription yet.
The user bought an Email subscription earlier that day.
The user bought an Email subscription within the last month.
The user bought an Email subscription and manually renewed it.
The first two situations are effectively the same: the user is going to see the standard monthly price.
Situation 3 is slightly different: the user will see a lower price, because any additional subscription(s) they buy will be prorated to cover the remainder of the billing month, so the price will be reduced.
Situation 4 is also different: the user will see a higher price, because any additional subscription(s) they buy will be prorated to cover the remainder of the current billing month plus any months needed to share the same expiry date.
The core change
This PR introduces a new “Pricing” section that displays the pricing to the user.
If the user sees only a “standard” price, we simply show the monthly price per mailbox.
If the user sees a lower prorated price, we show the prorated price, the standard renewal price and when it will go into effect (i.e. on the expiration/renewal date), and an explanation about why those two prices are different.
If the user sees a higher prorated price, we show the prorated price, the standard renewal price and when it will go into effect (i.e. on the expiration/renewal date), and an explanation about why those two prices are different.
Note: The current implementation relies on server-side price formatting logic.
Minor UI improvements
Just to try and tidy things up, I added some CompactCard elements to avoid having a flat wall of text. We can still improve from here (a lot) but this means we’re less bad after this iteration.
Note: This PR depends on D55887-code for additional values from the server.
We need to test the display for all of the core cases mentioned above:
Buying an Email mailbox for a domain that doesn’t have Email set up at all.
Buying additional Email mailboxes for a domain on the same day as the first mailbox was bought.
Buying additional Email mailboxes for a domain at least one day after first buying an Email mailbox, and less then a month later.
Buying additional Email mailboxes for a domain after manually renewing the Email subscription for that domain.
For all of the above test cases, verify all of the following:
You can see a valid price for the mailboxes you want to buy
If there is an existing subscription and proration should occur, verify that the pricing information is accurate and correctly formatted, including the renewal/expiry date.
Verify that the information we’re presenting in this page makes sense and is not too dense.
Verify that if you click the “Continue” button, the prorated price that was mentioned is also used by checkout.
If you want a bonus test case, you can also set up a user with an Email subscription in currency A. Then change the user’s default currency to currency B. For this case, the original currency and amounts should continue to be used.
Case 1: New purchase
Case 2: Additional purchase on same day
Case 3: Additional purchase with lower proration
Case 4: Additional purchase with higher proration
Unfortunately, no screenshots were provided by the developer.