Site Settings: separate reconnection and disconnection components in the JP Disconnect Flow. #17962

AnnaMag · 2017-09-08T17:50:22Z

Add Troubleshooting survey option to the Jetpack Disconnect UX.

Depends on: #17696

View:
/settings/disconnect-site/:site, where :site is a Jetpack or non-Atomic site.
For other sites the Flow redirects automatically to /settings/general:site.

To test:

Checkout this branch, or use calypso.live:
https://calypso.live/?branch=update/site-settings-site-survey-separate-reconnection

Verify that the options are visible as shown below and, upon selection, redirect to an empty placeholder follow-up Card.

Visuals:

a8ci18n · 2017-09-08T17:56:59Z

client/my-sites/site-settings/disconnect-site/disconnect.jsx

+		const textShareWhy =
+			translate( ' Would you mind sharing why you want to' + 'disconnect ' ) +
+			`${ siteSlug }` +
+			translate( ' from WordPress.com ' );


Hi! I've found a possible matching string that has already been translated 24 times:
translate( 'Updates from WordPress.com' ) ES Score: 9
See 2 additional suggestions in the PR translation status page

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

a8ci18n · 2017-09-08T22:36:09Z

client/my-sites/site-settings/disconnect-site/disconnect.jsx

+		const textShareWhy =
+			translate( ' Would you mind sharing why you want to disconnect ' ) +
+			`${ siteSlug }` +
+			translate( ' from WordPress.com ' );


Hi! I've found a possible matching string that has already been translated 24 times:
translate( 'Updates from WordPress.com' ) ES Score: 9
See 2 additional suggestions in the PR translation status page

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

Split translatable string is fixed.

a8ci18n · 2017-09-09T09:40:56Z

client/my-sites/site-settings/disconnect-site/disconnect.jsx

+			<Card>
+				<h1>
+					{' '}
+					{ translate( 'Disconnection' ) }{' '}


Hi! I've found a possible matching string that has already been translated 34 times:
translate( 'Disconnecting' ) ES Score: 11
See 2 additional suggestions in the PR translation status page

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

a8ci18n · 2017-09-09T09:40:56Z

client/my-sites/site-settings/disconnect-site/reconnect.jsx

+			<Card>
+				<h3>
+					{' '}
+					{ translate( 'Reconnection' ) }{' '}


Hi! I've found a possible matching string that has already been translated 22 times:
translate( 'Reconnecting…' ) ES Score: 13
See 2 additional suggestions in the PR translation status page

Help me improve these suggestions: react with 👎 if the suggestion doesn't make any sense, or with 👍 if it's a particularly good one (even if not implemented).

keoshi · 2017-09-11T14:45:15Z

Here's an updated mock that includes the dropdown changes of #17696 but, more important, introduces reconnect and live chat options below the survey.

cc @rickybanister and @folletto for review.

folletto · 2017-09-14T19:33:47Z

Looks good to me :)

Just two small bits on the actions outside the box:

They feel a bit unbalanced, as one is two lines and the other is just one line, also might be more evident due to the icon center-aligned but I'm not sure.
The second one doesn't look tappable.

Maybe...

break "Chat with us" on a new line and color it?
underline both of the links

rickybanister · 2017-09-26T15:15:01Z

I used more of a clickable card for the 'chat with us' option here:

#18149

Not sure if that's the right way to go, but felt more 'clickable'

I like having these as alternative options though!

This adds an extra reason for the disconnection from WP, which is common to all Plans: temporary disconnection to troubleshoot potential problems.

rickybanister · 2017-10-03T19:46:36Z

@keoshi as per my last comment, could we try separating your reconnect question to be a label, and then the link as a sort of borderless clickable card (for both the reconnect option and the contact support)?

So basically

Having problems with your site connection?
( ) Reconnect your site >
( ) Get help with your connection >

keoshi · 2017-10-04T12:34:43Z

How do you feel about this?

rickybanister · 2017-10-04T18:49:21Z

I think that's nice.

The only feedback I'd have is that you kind of created a new pattern with the bold text in the card as a 'title' instead of using the sectionHeader pattern. What do you think?

keoshi · 2017-10-04T19:03:10Z

Not sure what the difference is, is it the bold? These are just mocks, I might not have the existing styles in here.

rickybanister · 2017-10-05T14:39:04Z

Makes sense, as long as we use the sectionHeader component when we build it we're good.

ockham · 2017-10-25T20:18:28Z

Superseded by #19158 and #18968.

Add a button to get help (either via HappyChat, or the contact form). Implement the mockup found at #17962 (comment). Note that I've opted to stick with that mockup instead of #17962 (comment), since it's more consistent with prior art, such as #18397. This PR uses `jetpack-connect/happychat-button`, to which it adds an `onClick` prop in order to be able to pass the tracking event to it. It unifies some styling that was previously scattered across three different selectors, which ensures that the styling also works for this PR without having to add a fourth selector. (Bonus points for verifying that the styling still works for the other instances -- see testing instructions for #18397.) It also fixes the `state/analytics` README which I consulted while writing this PR 🙂 Discussion about functionality (what each button is supposed to do) is at #17962 (comment).

…ttic#18968) Add a button to get help (either via HappyChat, or the contact form). Implement the mockup found at Automattic#17962 (comment). Note that I've opted to stick with that mockup instead of Automattic#17962 (comment), since it's more consistent with prior art, such as Automattic#18397. This PR uses `jetpack-connect/happychat-button`, to which it adds an `onClick` prop in order to be able to pass the tracking event to it. It unifies some styling that was previously scattered across three different selectors, which ensures that the styling also works for this PR without having to add a fourth selector. (Bonus points for verifying that the styling still works for the other instances -- see testing instructions for Automattic#18397.) It also fixes the `state/analytics` README which I consulted while writing this PR 🙂 Discussion about functionality (what each button is supposed to do) is at Automattic#17962 (comment).

matticbot added OSS Citizen [Size] XL Probably needs to be broken down into multiple smaller issues labels Sep 8, 2017

AnnaMag self-assigned this Sep 8, 2017

AnnaMag added [Feature] Site Settings All other general site settings. [Status] In Progress labels Sep 8, 2017

a8ci18n reviewed Sep 8, 2017

View reviewed changes

AnnaMag force-pushed the update/site-settings-disconnect-site-survey-separate-reconnection branch from 5f50bb1 to 7df6641 Compare September 8, 2017 22:29

a8ci18n reviewed Sep 8, 2017

View reviewed changes

AnnaMag changed the title ~~JP Disconnect UX: separate reconnection component from the main flow.~~ Site Settings: separate reconnection and disconnection components in the JP Disconnect Flow. Sep 9, 2017

AnnaMag force-pushed the update/site-settings-disconnect-site-survey-separate-reconnection branch 2 times, most recently from 932e36a to a100c29 Compare September 9, 2017 09:35

a8ci18n reviewed Sep 9, 2017

View reviewed changes

AnnaMag requested a review from keoshi September 9, 2017 11:35

AnnaMag mentioned this pull request Sep 9, 2017

Site Settings: update JP Disconnect UX Survey with follow-up actions. #17972

Closed

AnnaMag force-pushed the update/site-settings-disconnect-site-survey-separate-reconnection branch from a100c29 to 33ebcb3 Compare September 10, 2017 23:12

AnnaMag force-pushed the update/site-settings-disconnect-site-survey branch from 2d3b434 to 98c88d2 Compare September 10, 2017 23:15

AnnaMag force-pushed the update/site-settings-disconnect-site-survey-separate-reconnection branch from 33ebcb3 to 1fa5e6f Compare September 11, 2017 14:26

AnnaMag force-pushed the update/site-settings-disconnect-site-survey branch 2 times, most recently from 53db3c5 to 29edd47 Compare September 29, 2017 12:26

AnnaMag force-pushed the update/site-settings-disconnect-site-survey-separate-reconnection branch 5 times, most recently from bcc19df to bcace66 Compare September 30, 2017 10:17

AnnaMag removed the [Size] XL Probably needs to be broken down into multiple smaller issues label Sep 30, 2017

AnnaMag force-pushed the update/site-settings-disconnect-site-survey branch from e2ace66 to 5d59c4f Compare September 30, 2017 10:43

AnnaMag force-pushed the update/site-settings-disconnect-site-survey branch 2 times, most recently from dd86f83 to 8ab75bd Compare October 1, 2017 23:07

AnnaMag force-pushed the update/site-settings-disconnect-site-survey-separate-reconnection branch from bcace66 to 3a7d664 Compare October 2, 2017 08:51

AnnaMag added 2 commits October 2, 2017 09:51

Disconnect Site: add troubleshoot option to the survey questions

3a7d664

This adds an extra reason for the disconnection from WP, which is common to all Plans: temporary disconnection to troubleshoot potential problems.

Disconnect Site: include Reconnect option

56205de

ockham force-pushed the update/site-settings-disconnect-site-survey branch from 56b9118 to 13ad12a Compare October 11, 2017 16:00

This was referenced Oct 12, 2017

Site Settings: Add JP Disconnect Flow Steps #18749

Merged

Site Settings: Add Troubleshoot section to Disconnect JP Flow #18968

Merged

ockham mentioned this pull request Oct 25, 2017

Disconnect Survey: Add 'Troubleshooting' option #19158

Merged

ockham closed this Oct 25, 2017

ockham deleted the update/site-settings-disconnect-site-survey-separate-reconnection branch October 25, 2017 20:18

matticbot removed the [Status] In Progress label Oct 25, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Site Settings: separate reconnection and disconnection components in the JP Disconnect Flow. #17962

Site Settings: separate reconnection and disconnection components in the JP Disconnect Flow. #17962

AnnaMag commented Sep 8, 2017 •

edited

Loading

a8ci18n Sep 8, 2017

a8ci18n Sep 8, 2017

AnnaMag Sep 10, 2017

a8ci18n Sep 9, 2017

a8ci18n Sep 9, 2017

keoshi commented Sep 11, 2017

folletto commented Sep 14, 2017

rickybanister commented Sep 26, 2017

rickybanister commented Oct 3, 2017

keoshi commented Oct 4, 2017

rickybanister commented Oct 4, 2017

keoshi commented Oct 4, 2017 via email •

edited

Loading

rickybanister commented Oct 5, 2017

ockham commented Oct 25, 2017

Site Settings: separate reconnection and disconnection components in the JP Disconnect Flow. #17962

Site Settings: separate reconnection and disconnection components in the JP Disconnect Flow. #17962

Conversation

AnnaMag commented Sep 8, 2017 • edited Loading

a8ci18n Sep 8, 2017

Choose a reason for hiding this comment

a8ci18n Sep 8, 2017

Choose a reason for hiding this comment

AnnaMag Sep 10, 2017

Choose a reason for hiding this comment

a8ci18n Sep 9, 2017

Choose a reason for hiding this comment

a8ci18n Sep 9, 2017

Choose a reason for hiding this comment

keoshi commented Sep 11, 2017

folletto commented Sep 14, 2017

rickybanister commented Sep 26, 2017

rickybanister commented Oct 3, 2017

keoshi commented Oct 4, 2017

rickybanister commented Oct 4, 2017

keoshi commented Oct 4, 2017 via email • edited Loading

rickybanister commented Oct 5, 2017

ockham commented Oct 25, 2017

AnnaMag commented Sep 8, 2017 •

edited

Loading

keoshi commented Oct 4, 2017 via email •

edited

Loading