Wp-calypso: Composite checkout: Incorrect display when paying with credits

[DavidRothstein]

Steps to reproduce

Add some credits to your account (enough to cover a full purchase) and then go to checkout. You get this:

This is confusing to begin with (since it's not clear what the savings represent) but as the screenshot shows, they also show up as savings even when you choose to pay with an actual payment method (e.g., a credit card) rather than with credits.

Not shown in the screenshot, but if you edit the order you can also try to remove the savings via the trash icon and (not surprisingly) it doesn't work.

Meanwhile, the same thing for partial credits looks like this:

The numbers are correct this time, but again, there's no indication that the savings are due to credits. If you edit the order, the information about credits being used does show up there, though.

What I expected

1. Some kind of indication that the savings were due to WordPress.com credits (similar to how it shows you an indication when your savings are due to a coupon).
2. The savings go away if I'm not actually paying by credits.
3. No trash icon next to the credits when editing the order (if they're not actually removable).

[DavidRothstein]

Not shown in the screenshot, but if you edit the order you can also try to remove the savings via the trash icon and (not surprisingly) it doesn't work.

Looks like that part might be covered by https://github.com/Automattic/wp-calypso/issues/43168 actually.

[sirbrillig]

This begs an interesting question:

When you have enough credits to 100% cover a purchase, we offer the full credits payment option, but (as a new feature of composite checkout) you may also choose to pay without credits. You do not have this choice when you have partial credits. The shopping cart endpoint reports the total price as discounted if you have partial credits, but reports the full total if you have full credits. How should we display total savings if there are full credits but you have chosen not to use them?

We could hide them, but then what happens if you have a discount from another source like a coupon or a prorated plan? We'd be hiding that discount too.

It would be nice if we could somehow determine from the shopping cart endpoint each individual discount and why it was applied, but currently that's not an option. We could at least determine what part of the discount is in credits, though.

If we do that we could change the "Total savings" line item to actually be a section, with line items for each of "Credits" and "Coupons and discounts" (which could just be "Discounts" if there is no coupon - we know if there is a coupon but not how much it saved us). If we did that, we'd be able to hide the "Credits" line item when the credits were 100%, no matter the payment method selected. We'd also be able to put a delete button next to "Coupons and discounts" if there is a coupon.

In the future, we might even be able to determine the different discounts themselves and split up "Coupons" into its own item, but that requires quite a lot of work on the shopping cart.

[sirbrillig]

Here's what I think the steps are to achieve this:

• In the shopping cart endpoint, remove credits from the savings_total properties.
• In checkout, instead of creating a "Total savings" line item, create special line items for "credits" and "discounts". For credits we can use the credits_display and credits_integer values already being returned from the shopping cart. For discounts, the label and type should vary based on is_coupon_applied (see above); we need the type too because we need to know if there is a coupon to remove.
• In the review step, show the new credits and discounts line items under a "Savings" header. Only display a remove button for discounts if the type also includes a coupon. Do not show the credits line item if the full-credits payment method is _available_ (no matter if it is selected or not).
• In the review step, hide the "Add coupon" button if the full-credits payment method is _available_. It would be nice to allow this, but I'm not sure the effect on the shopping cart endpoint of trying to use a coupon while you have full credits. We could try it first.
• In the summary box, use the same logic for "Savings".

[fditrapani]

This for reporting this @DavidRothstein. Before this came up, I was working on a way to remove the redundant Total savings line items in both columns and came up with this contrived sketch:

Do not show the credits line item if the full-credits payment method is available (no matter if it is selected or not).

Like @sirbrillig said, I think we should not display the credits in the savings unless it's a pro-rated credit or partial credit.

In the review step, show the new credits and discounts line items under a "Savings" header. Only display a remove button for discounts if the type also includes a coupon.

On this point, I'd like to propose an alternative where we list out each savings item individually. I could only think of a partial credit, coupon, and a pro-rated credit — which I thought might work better if it was applied directly to the plan?

In the summary box, use the same logic for "Savings".

I agree with this and was wondering whether we need to show a sub-total line item here too?

[sirbrillig]

Some new steps:

1. Figure out the actual amount saved by coupons: D45080-code.
2. Replace "total savings" with coupon total and credits total: https://github.com/Automattic/wp-calypso/pull/43453
3. Figure out which line items have a pro-rated credit applied.
4. Add "pro-rated credits" to line items where they are applied.
5. Figure out what "Savings" should include and modify the endpoint to include it.
6. Add "subtotal" to summary box.
7. Add a new total property to the endpoint that is 0 when the credits cover the entire cost.
8. Use the new total property as the total for new checkout to make full credit purchases more consistent.

Added cards for these aspects of that mockup to our project board.

[fditrapani]

Awesome. Thanks @sirbrillig!