Currently, as implemented in #73415, if a desired retention option requires additional storage, we have a Purchase button that redirects the customer to the checkout page. After purchasing the add-on storage, they are redirected back to the setting page and now that they don’t require additional storage, they need to click on Update setting.
The idea is to allow customers to update their retention period after a successful add-on storage purchase without the need of clicking again on another button.
Proposed Changes
- Add flow to update the retention setting automatically after being redirected due to a successful add-on storage purchase.
- If the desired retention requires more storage (because the expected storage is above our bigger add-on offer), the retention will not be updated automatically. They will need to buy the necessary add-ons first.
- Add new query argument
storage_purchase that will be used when redirected from the checkout page after a successful add-on storage purchase.
Demo
Screenshots
| Before |
After |
 |
 |
Testing Instructions
Unit testing
You can run the unit tests by running yarn run test-client client/components/backup-retention-management.
Acceptance test
Unfortunately, this one cannot be tested using Jetpack Cloud live branch, due to some restrictions redirecting back from checkout page to calypso.live domain.
- Checkout
add/backup-retention-purchase-update-flow branch locally.
- Run
ENABLE_FEATURES=no-force-sympathy yarn start-jetpack-cloud. This is to prevent state to being randomly cleared out when redirected back from checkout. More details on what sympathy means here.
- Navigate to Settings and wait for the new setting to load.
- Ensure the
Update settings button is disabled when the current plan is selected if that plan doesn’t require an storage upgrade.
- Click an option that requires an upgrade and validate:
- It should display a message similar to:
- Ensure the CTA button is renamed to
Purchase and update
- Click on the CTA. It should redirect you to the checkout page and add the product to the cart.
- Remove all items from the checkout cart.
- It should redirected back to the setting page with the
retention=NUMBER query argument.
- The radio button with that option should be selected by default.
- Now, try again, clicking on the CTA to redirect you back to the checkout page.
- Purchase the add-on with credits and ensure that after purchasing, it should redirect you to the setting page.
- The URL should have a
retention=NUMBER&storage_purchased=1 query arguments, and the radio button with that option should be selected by default.
- You should see the CTA button is disabled and after a bit you should receive the success notice and the
Current plan indicator should be switched to the selected option.
Pre-merge Checklist
- Has the general commit checklist been followed? (PCYsg-hS-p2)
- Have you written new tests for your changes?
- Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
- Have you checked for TypeScript, React or other console errors?
- Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
- Have we added the “[Status] String Freeze” label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For changes affecting Jetpack: Have we added the “[Status] Needs Privacy Updates” label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?
Unfortunately, no screenshots were provided by the developer.
