#7381485 Purchase page: Fix cancellation flow for refundable Jetpack products

This adds the new Jetpack Cancellation flow also for products that are within the refund window

Changes proposed in this Pull Request

• This PR changes the cancellation/removal flow for refundable Jetpack products to use the new Jetpack Cancellation flow introduced in #54669.
• It adds some additional logic to handle which steps of the flow should show in different contexts.

Context: p1631606938143800-slack-C01264051NE

Testing instructions

There are 4 different actions where this flow is used for Jetpack products, these are:

1. Canceling a product that is refundable
2. Cancelling a product that is not refundable
3. Removing a product that has already been cancelled
4. Removing a product that is not able to renew automatically (cancel and remove at the same time)

You should test each of these actions.

• To start, checkout this branch in your test environment.

Canceling a product that is refundable.

• Purchase a new Jetpack product (you might want to read this PCYsg-IA-p2 to use test data)
• Select the site you are testing with in Calypso and click on “Upgrades > Purchases” to find the purchase. (Or you can select the purchase from /me/purchases)
• Click to cancel and refund this product/plan. You will be directed to a second screen where you will need to click the “Cancel Subscription” button to initiate the cancellation flow.
• The flow should contain both screens shown above – showing what will be lost when cancelling and a survey.
• The survey step should have a button to Cancel the subscription

Cancelling a product that is not refundable

• You will need a Jetpack product that cannot be refunded and can be cancelled. If you have a purchase that was made a while ago, it should be in this state – no longer eligible for a refund. See p1653337665288389-slack-C0117V2PCAE for more info.
• Select the site you are testing with in Calypso and click on “Upgrades > Purchases” to find the purchase. (Or you can select the purchase from /me/purchases)
• Click “Cancel Subscription” to cancel the purchase. You will be directed to a second screen where you will need to click the “Cancel Subscription” button to initiate the cancellation flow.
• The flow should only show the survey screen in this instance.
• The survey screen should have a button to Cancel the subscription

Removing a product that has already been cancelled

• If you complete the flow in the section above to cancel a product, it will be cancelled, but not removed. The product is still active until the expiration date.
• Select the site you are testing with in Calypso and click on “Upgrades > Purchases” to find the purchase. (Or you can select the purchase from /me/purchases)
• From the purchase screen, you should now see a “Remove” button that will initiate the cancellation flow. Click this button.
• In this case, the flow should only show the first screen, indicating what will be lost when the subscription is removed.
• The first screen should have a “Remove Subscription” button.

Removing a product that is not able to renew automatically

• Plans that are purchased with credits fall into this category, they are not able to renew automatically.
• Obtain a Jetpack product that is not able to renew automatically.
• Select the site you are testing with in Calypso and click on “Upgrades > Purchases” to find the purchase. (Or you can select the purchase from /me/purchases)
• From the purchase screen, you should now see a “Remove” button that will initiate the cancellation flow. Click this button.
• In this case, the flow should show both screens shown above.
• The survey step should have a “Remove Subscription” button.