Purchases: Update price text to be more clear for introductory offers, take 2 #7783778

Take 2

This PR is identical to #72536. That PR was reverted because there were issues with the pre-release tests which ended up being unrelated (see Slack thread p1675098003762539-slack-C02DQP0FP for details).

Proposed Changes

This PR implements several updates to the purchases page which should help clarify the displayed prices for purchases which are introductory offers.

• Update the “Price” meta box title to say “Renewal Price” instead to clarify that this is not the previously paid price.
• When an intro offer with a pro-rated renewal exists, remove the time period (eg: “/ year”) from the small renewal price in the meta box because the next time period’s renewal price will probably differ from future renewal prices.
• Remove the “Discount for {intro period}” subtext for all purchases because it is too confusing to explain if this is referring to a previous payment or the next payment and how it relates to an introductory offer price’s schedule.
• Leave the “After the first renewal…”/”After offer ends…” subtext for introductory offers but add the time period to the subscription price (e.g. “After the first renewal, the subscription price with be $120 / year”). Since we’re removing the term from the small renewal price (see above), this will clarify how often renewals will occur.
• For the big price at the top of the page, make it the standard, un-discounted renewal price of the product instead of the next renewal price. It’s very hard to know what that price represents (last paid price? next renewal price? regular renewal price?) but it’s probably better to show the regular renewal price and represent discounts with more context in the meta box.

Fixes Automattic/payments-shilling#1314

Screenshots

Before:

After:

After for a non-introductory offer (only the “Renewal Price” text is different):

Testing Instructions

• To test this, you’ll need to have a purchased product that has an introductory offer. At the time of writing the only one I know of which falls into this category is Jetpack Social. Purchase this product.
• Visit the purchase page for the introductory offer product by visiting /me/purchases and clicking on the product.
• Compare the purchase page to the same page without this PR. Verify that the new page’s text and prices make sense as per the description of this change.