Site Settings: Add Troubleshoot section to Disconnect JP Flow (Automa…

…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).

client/jetpack-connect/happychat-button.jsx

@@ -26,6 +26,7 @@ const JetpackConnectHappychatButton = ( {
 	isChatAvailable,
 	isLoggedIn,
 	label,
+	onClick,
 	translate,
 } ) => {
 	if ( ! isEnabled( 'jetpack/happychat' ) || ! isLoggedIn ) {
@@ -43,8 +44,9 @@ const JetpackConnectHappychatButton = ( {
 
 	return (
 		<HappychatButton
-			className="logged-out-form__link-item jetpack-connect__happychat-button"
 			borderless={ false }
+			className="logged-out-form__link-item jetpack-connect__happychat-button"
+			onClick={ onClick }
 		>
 			<HappychatConnection />
 			<Gridicon icon="chat" /> { label || translate( 'Get help connecting your site' ) }
@@ -54,6 +56,7 @@ const JetpackConnectHappychatButton = ( {
 
 JetpackConnectHappychatButton.propTypes = {
 	label: PropTypes.string,
+	onClick: PropTypes.func,
 };
 
 export default connect( state => ( {

client/jetpack-connect/style.scss

@@ -3,13 +3,6 @@
 
 	.logged-out-form__links {
 		max-width: 100%;
-
-		.logged-out-form__link-item {
-			.gridicon {
-				position: relative;
-				top: 4px;
-			}
-		}
 	}
 
 	.formatted-header{
@@ -36,13 +29,6 @@
 		margin-top: 15px;
 		text-align: center;
 
-		.logged-out-form__link-item {
-			.gridicon {
-				position: relative;
-				top: 4px;
-			}
-		}
-
 		.jetpack-connect__happychat-button {
 			text-align: center;
 		}
@@ -485,6 +471,8 @@
 	.gridicon {
 		width: 18px;
 		height: 18px;
+		position: relative;
+		top: 4px;
 	}
 }
 
@@ -551,13 +539,6 @@
 	.jetpack-connect__happychat-button {
 		text-align: center;
 	}
-
-	.logged-out-form__link-item {
-		.gridicon {
-			position: relative;
-			top: 4px;
-		}
-	}
 }
 
 .jetpack-connect__auth-form-header-image {

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

@@ -6,13 +6,15 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { flowRight, get } from 'lodash';
 import { localize } from 'i18n-calypso';
+
 /**
  * Internal dependencies
  */
 import DisconnectSurvey from './disconnect-survey';
 import MissingFeature from './missing-feature';
 import TooDifficult from './too-difficult';
 import TooExpensive from './too-expensive';
+import Troubleshoot from './troubleshoot';
 import DocumentHead from 'components/data/document-head';
 import FormattedHeader from 'components/formatted-header';
 import NavigationLink from 'components/wizard/navigation-link';
@@ -55,6 +57,7 @@ const DisconnectSite = ( { reason, siteSlug, translate } ) => {
 					<NavigationLink href={ backHref } direction="back" />
 					<NavigationLink href={ confirmHref } direction="forward" />
 				</div>
+				<Troubleshoot />
 			</Main>
 		</div>
 	);

client/my-sites/site-settings/disconnect-site/style.scss

@@ -29,3 +29,11 @@
 		float: right;
 	}
 }
+
+// 'Troubleshooting' section
+.disconnect-site__troubleshooting {
+	.jetpack-connect__happychat-button,
+	.jetpack-connect__help-button {
+		text-align: center;
+	}
+}

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

@@ -0,0 +1,34 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { connect } from 'react-redux';
+import { localize } from 'i18n-calypso';
+
+/**
+ * Internal dependencies
+ */
+import JetpackConnectHappychatButton from 'jetpack-connect/happychat-button';
+import HelpButton from 'jetpack-connect/help-button';
+import { recordTracksEvent, withAnalytics } from 'state/analytics/actions';
+
+const Troubleshoot = ( { trackSupportClick, translate } ) => (
+	<div className="disconnect-site__troubleshooting">
+		<JetpackConnectHappychatButton
+			label={ translate( 'Get help from our Happiness Engineers' ) }
+			onClick={ trackSupportClick }
+		>
+			<HelpButton
+				label={ translate( 'Get help from our Happiness Engineers' ) }
+				onClick={ trackSupportClick }
+			/>
+		</JetpackConnectHappychatButton>
+	</div>
+);
+
+export default connect( null, {
+	trackSupportClick: withAnalytics(
+		recordTracksEvent( 'calypso_jetpack_disconnect_support_click' )
+	),
+} )( localize( Troubleshoot ) );

client/state/analytics/README.md

@@ -3,15 +3,15 @@
 ## Overview
 
 Analytics track things. By their very nature they are side-effecting actions, usually by sending API calls to one or more analytics servers.
- 
+
 Calypso supports a variety of analytics methods including (but not limited to) Google Analytics, stat bumping, and Tracks events.
- 
+
 As we develop the different view components in React for Calypso, we should work hard to keep them as pure and simple as they can be. This brings with it many benefits, including the ability to easily test those components. Calling out these side-effecting operations can break those tests among other things.
- 
+
 _**Middleware**_ is a stage in the **Redux** pipeline that runs between dispatching an action and when that action runs through the reducers. By incorporating the side-effecting operations at this point, we decouple those breaking effects from the other parts of the app.
- 
+
 This module provides just such a middleware: it allows React components to now fire off Redux actions indicating the _intent_ to send an analytics metric instead of actually sending it, keeping the otherwise-unreleted dependencies out of the components.
- 
+
 ## Usage
 
 As this middleware follows the [Flux Standard Action](https://github.com/acdlite/flux-standard-action) pattern, you can start tracking analytics simply by adding a new `meta` block to your existing actions. A helper function `withAnalytics()` is provided to make this easy.
@@ -51,8 +51,8 @@ dispatch( withAnalytics(
 
 // passed as a component prop
 const trackSelection =
-    withAnalytics( recordTrackEvent( 'selected_page', { 'page': 'somePage' } ) );
-    
+    withAnalytics( recordTracksEvent( 'selected_page', { page: 'somePage' } ) );
+
 const mapDispatchToProps = {
     selectPage: trackSelection( selectPage ),
     recordPageLoad: bumpStat( 'page_loaded', 'page_selected_page' )
@@ -65,7 +65,7 @@ const mapDispatchToProps = {
 `composeAnalytics( ...analytics )`: Combines analytics actions by themselves into one mutli-analytic-tracking action.
 
 `withAnalytics :: Object -> ( Object | function ) -> ( Object | function )`<br />
-`withAnalytics( analytics, action )`: Combines analytics action with other action. Can be called with two arguments, which returns a new action, or with only an `analytics` action, which returns a new function of a single argument taking an action. This curried form is useful for reusing a single analytics action with multiple other actions. 
+`withAnalytics( analytics, action )`: Combines analytics action with other action. Can be called with two arguments, which returns a new action, or with only an `analytics` action, which returns a new function of a single argument taking an action. This curried form is useful for reusing a single analytics action with multiple other actions.
 
 `bumpStat :: String -> String -> Object`<br />
 `bumpStat( group, name )`: Creates an action to bump the stat with given group and name.
@@ -83,7 +83,7 @@ const mapDispatchToProps = {
 `recordGooglePageView( url, title )`: Creates an action to record a page view in Google Analytics.
 
 `loadTrackingTool :: String -> String -> Object`<br />
-`loadTrackingTool ( trackingTool )`: Creates an action to load a tracking tool that gets attached to the DOM on component mount. Pass tracking tool reference through to middleware and manage loading scripts there. 
+`loadTrackingTool ( trackingTool )`: Creates an action to load a tracking tool that gets attached to the DOM on component mount. Pass tracking tool reference through to middleware and manage loading scripts there.
 
 ### Internal Helpers
 
@@ -93,4 +93,4 @@ These can be used in client code but are intended to be used internally within t
 `recordEvent( service, args )`: Used to create event-tracking action-creators. The actions will be dispatched based on the `service` name and passed the `args` in the action payload.
 
 `recordPageView :: String -> String -> String* -> Object`<br />
-`recordPageView( url, title, service* )`: Creates an action to record a page view. If service is omitted, the default behavior is to record in both Google Analytics _and_ in Tracks. 
+`recordPageView( url, title, service* )`: Creates an action to record a page view. If service is omitted, the default behavior is to record in both Google Analytics _and_ in Tracks.