#6563038 Purchases: Redesigned pre-cancellation survey for plans

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”.
  •