composite-checkout: Fix discounted price in variant picker

[sirbrillig]

Changes proposed in this Pull Request

In #42723 I added a bunch of query components from old checkout to new checkout, including QuerySitePlans, but I accidentally added them to renderContactDetails instead of the output of CompositeCheckout. One result of this is that the state.sites.plans Redux state was not populated, which meant that the local data used to determine if a plan should receive a prorated discount was not available. In new checkout, that data is used only for the plan variant selector (all the rest of the prices come from the shopping cart endpoint) and so the selector is showing the un-discounted price for each plan variant.

This PR moves the Query components to their correct location, but even though that makes the data available, we were still not using the discounted price in the variant selector. This PR also modifies the logic for displaying the price in the selector to take the discount into account.

Fixes #43122

Testing instructions

• Use a site which already has a plan (eg: Personal).
• Add a higher-priced plan to the cart (eg: Premium).
• Visit composite checkout.
• Click the "Edit" button for the review step (the first step at the top of checkout).
• Verify that the discounted price for the plan in the cart matches the price in the one-and-two-year variant selector.

[matticbot]

Test live: https://calypso.live/?branch=fix/composite-checkout-variant-discount-price

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~39 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
checkout       +259 B  (+0.0%)      +39 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~8 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
async-load-design-blocks        +34 B  (+0.0%)       +8 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[sirbrillig]

Just need to make sure this works with monthly prices and bi-annual prices. There's some additional logic in SubscriptionLengthPicker that we might need.

[fditrapani]

Thanks for putting this together. It's good to see the prices properly reflected there. Looking at it though, I'm not sure why I'm getting the discount. Maybe we need to add a descriptor under savings to match what we're doing with coupons (I used similar copy from our plans page but am open to suggestions):

I also noticed if I press the delete button next to total savings, it doesn't do anything. We should probably only show that if a coupon has been applied.

[sirbrillig]

@fditrapani thanks! Since neither of those requests have much to do with the variant picker that's fixed by this PR I made them into their own issues that I'll tackle separately: #43167 and #43168

[fditrapani]

Awesome. thank you!