New Disconnect Dialog

[cbauerman]

Changes proposed in this Pull Request:

• Adds new, redesigned disconnect dialog
• Disconnect dialog now dynamically pulls in usage stats of Jetpack on the site
• Prep work for Survey Step in disconnect dialog
• Prep work for Plugins Install mobile

Two Site Benefits - Mobile

Three Site Benefits - Mobile

Single Site Benefit - Wide

Two Site Benefits - Wide

Three Site Benefits - Wide

Is this a new feature or does it add/remove features to an existing part of Jetpack?

• Internal reference: parBdM-hs-p2

Redesign of Jetpack Disconnect Dialog

Testing instructions:

1. Navigate to /wp-admin/admin.php?page=jetpack#/dashboard
2. Click "Manage Site Connection"

3. Verify that your dialog roughly matches one of the above screenshot. 4. Modify the following code snippet and insert into `_inc/client/components/jetpack-termination-dialog/features.jsx` before the line `const siteBenefitCount = siteBenefits.length;` with varying amounts of additional site benefits to test the various cases.

	siteBenefits = siteBenefits.concat( [
		{
			title: 'Brute Force Protection',
			description: 'The number of malicious login attempts blocked by Jetpack.',
			amount: 32030,
			gridIcon: 'lock',
		},
		{
			title: 'Contact Forms',
			description: 'The number of live Jetpack forms on your site right now.',
			amount: 31,
			gridIcon: 'align-image-center',
		},
		{
			title: 'Publicize',
			description: 'The number of live social media connections, powered by Jetpack.',
			amount: 3,
			gridIcon: 'share',
		},
		{
			title: 'Subscribers',
			description: 'The number of people subscribed to your updates through Jetpack.',
			amount: 4200,
			gridIcon: 'user',
		},
	] );

Proposed changelog entry for your changes:

Redesign of Jetpack Disconnect Dialog

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: November 5, 2019.
Scheduled code freeze: October 29, 2019

Generated by 🚫 dangerJS against 3a750b4

[jeherve]

Removing the milestone since we discussed that this would be postponed to the next release:
p1568997915079200-slack-jetpack-crew

[cbauerman]

Removing the milestone since we discussed that this would be postponed to the next release:
p1568997915079200-slack-jetpack-crew

I managed to both flip the code freeze and release dates and move Sep 23 to Oct 23 in my mind 🤦‍♂️ Thanks for the catch!

[scottsweb]

Thanks for the ping on this. Some initial thoughts:

• The close icon at the top right of the modal doesn't appear to be clickable (no cursor change) and it cannot be tabbed to either. So perhaps we just need to warp it in an <a>?
• We do not provide this modal when removing the plugin from the plugins.php screen yet. The same goes for the disconnect link on admin.php?page=jetpack-debugger. Guessing that might be coming soon along with the disconnect survey.
• On first load the modal was a little narrow, but it cleared up after subsequent refreshes, I think it might have been a build issue:

• The responsiveness of the modal is great 👍
• There were a couple of things in the original mockup (towards the bottom of the modal) that I think worked a little better:

• The first CTA was changed to blue and "continue" to make it clear there is a second step
• The support link had a little more room around it
• The links were not italicised
• We use a mixture of log out and disconnect, I am not sure where we landed on this in the end but it was certainly a point of discussion. On that same note it might be worth a copy review from @robertbpugh

If I can help with anything then please let me know!

[cbauerman]

So, to wrap this whole conversation I need to add that this is designed to be PR 1 of 3 which explains some changes:

1. ( This PR ) Redesigned Disconnect Dialog with 1-step, only on Jetpack Dashboard
2. 2-Step Disconnect Dialog with Survey
3. Add to Plugins Screen

So the following changes are intentional

• Blue Continue Button -> Red Disconnect Button
• No Survey Step
• Missing from Plugins Screen
  Are definitely missing by design.

I will be addressing/looking into:

• Cursor on modal close
• Link italics -> underlines
• Support link space

and I am looking for feedback on the copy. My plan is to use "Disconnect Jetpack" on the dashboard and "Disable Jetpack" on the upcoming plugins screen. ( cc @robertbpugh )

let me know how that sounds @scottsweb!

[cbauerman]

Did not mean to close, pressed the button without looking too close 🤦‍♂️

[scottsweb]

That all sounds good to me, it is good to break this down into separate PRs. Your copy proposal makes sense too given that the outcomes are slightly different based on the where the modal is initiated from.

[scottsweb]

Did you want me to test this again @cbauerman now the styles have been updated ?

[cbauerman]

Did you want me to test this again @cbauerman now the styles have been updated ?

@scottsweb yes please!

[jeherve]

Re-approving after a rebase. I'll merge this now to avoid any more conflicts with master in the future.