Resolves 1200412004370260-as-1200532973279699
.
Changes proposed in this Pull Request
- On the Manage Purchase page, move the Renew button into a parent div to allow for more than one button in the upper-right corner of the selected product card.
- Create a new Upgrade button for the upper-right portion of the product card that shows up for upgradeable purchases.
- Add a function to determine the correct upgrade URL, depending on whether the purchase has upgradeable storage or not.
Known issues
- The implementation as I’ve designed it is fairly barebones and fragile. I’m very much open to making it more robust, but personally I feel the entire
ManagePurchase
component has a lot going on and would benefit much more from being broken down and refactored. I took a shot at this recently on a private branch and I believe it’s doable, but it’s beyond the scope of this PR, so I chose to leave it for later.
Testing instructions
NOTE: Try the following test instructions for at least a Backup purchase, a Security purchase, one or more other plans/products, and one expired purchase. If you need information on how to simulate these states, message me directly.
- Open Calypso Blue, select a self-hosted Jetpack site, and visit the Upgrades > Purchases page. Click on a purchase to be brought to the Manage Purchase page.
- If the purchase you selected has upgradeable storage (i.e., Backup or Security), verify the Upgrade button is displayed in the upper right of the product card as well as below the product card as part of the actions menu.
- Verify both Upgrade buttons direct you to
/plans/storage/:site_id
.
- Verify when the viewport is narrower than 660px, the upper-right buttons disappear.
- If the purchase you selected is upgradeable in a different way (i.e., Security Daily or Security Real-time), verify the Upgrade button/nav item are displayed, but their links send you to the general Plans page.
- If the purchase you selected is not upgradeable (i.e., Complete or a non-Backup stand-alone product), verify the Upgrade button/nav item are not visible.
- If you have a purchase that would be upgradeable but is expired, verify the Upgrade button/nav item are not shown.
Reference screenshots
Unfortunately, no screenshots were provided by the developer.