Description
Fixes #55569
Changes proposed in this Pull Request
- Introduces a new
BlankCanvas component to be used across Calypso when there is a need of rendering a simple and clean layout (which imitates the Gutenberg style of the new onboarding flow).
- Replaces the pre-cancellation survey with a fullscreen dialog (which uses the new
BlankCanvas component) when cancelling/removing a plan and the purchases/cancel-plan-fullscreen-form feature flag is active.
| Desktop |
Mobile |
 |
 |
Testing instructions
Plan removal (feature flag disabled)
- Use the Calypso live link below.
- Switch to a Simple site without plan.
- Go to Upgrades > Plans.
- Purchase a paid plan with credits.
- Go to Upgrades > Purchases.
- Try removing the plan you just bought.
- Make sure you get the same pre-cancellation survey as in prod.
- Make sure you can remove the plan successfully.
Plan removal (feature flag enabled)
- Use the Calypso live link below.
- Append
?flags=purchases/cancel-plan-fullscreen-form at the end of the URL to enable the feature flag.
- Switch to a Simple site without plan.
- Go to Upgrades > Plans.
- Purchase a paid plan with credits.
- Go to Upgrades > Purchases.
- Try removing the plan you just bought.
- Make sure you get the redesigned pre-cancellation survey.
- Make sure the UI matches the design of the Figma file for both mobile and desktop viewports: hDzpuFGlCMGsFxfyFJamJ0-fi-32%3A174.
- Make sure the UI refers to this flow as “Remove plan”.
- Make sure you can remove the plan successfully.
Plan cancellation (feature flag disabled)
- Use the Calypso live link below.
- Switch to a Simple site without plan.
- Go to Upgrades > Plans.
- Purchase a paid plan with a credit card (you can use the sandbox store: PCYsg-lW4-p2#sandbox-method).
- Go to Upgrades > Purchases.
- Try cancelling the plan you just bought.
- Make sure you get the same pre-cancellation survey as in prod.
- Make sure you can cancel the plan successfully.
Plan cancellation (feature flag enabled)
- Use the Calypso live link below.
- Append
?flags=purchases/cancel-plan-fullscreen-form at the end of the URL to enable the feature flag.
- Switch to a Simple site without plan.
- Go to Upgrades > Plans.
- Purchase a paid plan with a credit card (you can use the sandbox store: PCYsg-lW4-p2#sandbox-method).
- Go to Upgrades > Purchases.
- Try cancelling the plan you just bought.
- Make sure you get the redesigned pre-cancellation survey.
- Make sure the UI matches the design of the Figma file for both mobile and desktop viewports: hDzpuFGlCMGsFxfyFJamJ0-fi-32%3A174.
- Make sure the UI refers to this flow as “Cancel plan”.
- Make sure you can cancel the plan successfully.
Happychat
- Connect to the staging Happychat HUD (PCYsg-b99-p2).
- Follow instructions above to cancel/remove a plan with the feature flag enabled.
- Make sure you see the “Need help? Chat with us” button when you’re marked as available in the HUD.
- Make sure you don’t see the “Need help? Chat with us” button when you’re marked as unavailable in the HUD, or when you’re not connected to the the HUD.
Upsells
- Follow instructions above to cancel/remove a plan with the feature flag enabled.
- Make sure you get the upsell below when removing/cancelling a Business plan and after selecting “I couldn’t install a plugin/theme I wanted”.
- Make sure you get the upsell below when removing/cancelling a Premium plan and after selecting “I couldn’t install a plugin/theme I wanted”.
- Make sure you get the upsell below when cancelling a Premium plan and after selecting “I couldn’t install a plugin/theme I wanted”.
Unfortunately, no screenshots were provided by the developer.
