@automattic/jetpack-connection 0.29.8

package/components/disconnect-dialog/steps/step-disconnect-confirm.jsx

@@ -0,0 +1,87 @@
+import { DecorativeCard } from '@automattic/jetpack-components';
+import { Button } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import React from 'react';
+import disconnectImage from '../images/disconnect-confirm.jpg';
+
+/**
+ * Shows the step that confirms the site has been disconnected, asks if user would like to provide feedback.
+ * Will only show option to provide feedback if the canProvideFeedback prop is true.
+ *
+ * @param {object} props - The properties.
+ * @returns {React.Component} - StepDisconnectConfirm Component
+ */
+const StepDisconnectConfirm = props => {
+	const { onExit, canProvideFeedback, onProvideFeedback } = props;
+
+	return (
+		<div className="jp-connection__disconnect-dialog__content">
+			<DecorativeCard icon="unlink" imageUrl={ disconnectImage } />
+
+			<div className="jp-connection__disconnect-dialog__step-copy jp-connection__disconnect-dialog__step-copy--narrow">
+				<h1>
+					{ createInterpolateElement(
+						__( 'Jetpack has been <br/>successfully disconnected.', 'jetpack' ),
+						{
+							br: <br />,
+						}
+					) }
+				</h1>
+
+				{ canProvideFeedback && (
+					<>
+						<p>
+							{ __(
+								'We’re sorry to see you go. Here at Jetpack, we’re always striving to provide the best experience for our customers. Please take our short survey (2 minutes, promise).',
+								'jetpack'
+							) }
+						</p>
+						<p>
+							<Button
+								variant="primary"
+								onClick={ onProvideFeedback }
+								className="jp-connection__disconnect-dialog__btn-back-to-wp"
+							>
+								{ __( 'Help us improve', 'jetpack' ) }
+							</Button>
+						</p>
+						<a
+							className="jp-connection__disconnect-dialog__link jp-connection__disconnect-dialog__link--bold"
+							href="#"
+							onClick={ onExit }
+						>
+							{ __( 'No thank you', 'jetpack' ) }
+						</a>
+					</>
+				) }
+
+				{ ! canProvideFeedback && (
+					<>
+						<p>
+							<Button
+								variant="primary"
+								onClick={ onExit }
+								className="jp-connection__disconnect-dialog__btn-back-to-wp"
+							>
+								{ __( 'Back to my website', 'jetpack' ) }
+							</Button>
+						</p>
+					</>
+				) }
+			</div>
+		</div>
+	);
+};
+
+StepDisconnectConfirm.propTypes = {
+	/** Callback used to close the modal. */
+	onExit: PropTypes.func,
+	/** Callback used to change the state if user would like to provide feedback. */
+	onProvideFeedback: PropTypes.func,
+	/** Does the app have the necessary information to collect a survey response? */
+	canProvideFeedback: PropTypes.bool,
+};
+
+export default StepDisconnectConfirm;

package/components/disconnect-dialog/steps/step-disconnect.jsx

@@ -0,0 +1,206 @@
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { Button, ExternalLink } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import React, { useCallback, useEffect } from 'react';
+import ConnectedPlugins from '../../connected-plugins';
+
+/**
+ * Disconnect step in disconnection flow.
+ *
+ * @param {object} props - The properties.
+ * @returns {React.Component} - The StepDisconnect component
+ */
+const StepDisconnect = props => {
+	const {
+		title,
+		isDisconnecting,
+		onDisconnect,
+		disconnectError,
+		disconnectStepComponent,
+		connectedPlugins,
+		disconnectingPlugin,
+		closeModal,
+		context,
+		trackModalClick,
+	} = props;
+
+	const trackLearnClick = useCallback(
+		() => trackModalClick( 'jetpack_disconnect_dialog_click_learn_about' ),
+		[ trackModalClick ]
+	);
+	const trackSupportClick = useCallback(
+		() => trackModalClick( 'jetpack_disconnect_dialog_click_support' ),
+		[ trackModalClick ]
+	);
+	const handleStayConnectedClick = useCallback( () => {
+		trackModalClick( 'jetpack_disconnect_dialog_click_stay_connected' );
+		closeModal();
+	}, [ trackModalClick, closeModal ] );
+	const handleDisconnectClick = useCallback(
+		e => {
+			trackModalClick( 'jetpack_disconnect_dialog_click_disconnect' );
+			onDisconnect( e );
+		},
+		[ trackModalClick, onDisconnect ]
+	);
+	const handleEscapePress = useCallback(
+		event => {
+			if ( event.key === 'Escape' && ! isDisconnecting ) {
+				handleStayConnectedClick();
+			}
+		},
+		[ handleStayConnectedClick, isDisconnecting ]
+	);
+
+	useEffect( () => {
+		document.addEventListener( 'keydown', handleEscapePress, false );
+
+		return () => {
+			document.removeEventListener( 'keydown', handleEscapePress, false );
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+
+	/**
+	 * Render the disconnect button, allows for some variance based on context.
+	 *
+	 * @returns {React.Component} - Button used for disconnect.
+	 */
+	const renderDisconnectButton = () => {
+		let buttonText = __( 'Disconnect', 'jetpack' );
+		// When showing on the plugins page, this button should deactivate the plugin as well.
+		if ( isDisconnecting ) {
+			buttonText = __( 'Disconnecting…', 'jetpack' );
+		} else if ( context === 'plugins' ) {
+			buttonText = __( 'Deactivate', 'jetpack' );
+		}
+
+		return (
+			<Button
+				variant="primary"
+				disabled={ isDisconnecting }
+				onClick={ handleDisconnectClick }
+				className="jp-connection__disconnect-dialog__btn-disconnect"
+			>
+				{ buttonText }
+			</Button>
+		);
+	};
+
+	/**
+	 * Show some fallback output if there are no connected plugins to show and no passed disconnect component.
+	 * This is a more generic message about disconnecting Jetpack.
+	 *
+	 * @returns {React.ElementType|undefined} - Fallback message for when there are no connected plugins or passed components to show.
+	 */
+	const renderFallbackOutput = () => {
+		const hasOtherConnectedPlugins =
+			connectedPlugins &&
+			Object.keys( connectedPlugins ).filter( key => key !== disconnectingPlugin ).length;
+
+		if ( ! hasOtherConnectedPlugins && ! disconnectStepComponent ) {
+			return (
+				<div className="jp-connection__disconnect-dialog__step-copy">
+					<p className="jp-connection__disconnect-dialog__large-text">
+						{ __( 'Jetpack is currently powering multiple products on your site.', 'jetpack' ) }
+						<br />
+						{ __( 'Once you disconnect Jetpack, these will no longer work.', 'jetpack' ) }
+					</p>
+				</div>
+			);
+		}
+
+		return undefined;
+	};
+
+	return (
+		<React.Fragment>
+			<div className="jp-connection__disconnect-dialog__content">
+				<h1 id="jp-connection__disconnect-dialog__heading">{ title }</h1>
+				<ConnectedPlugins
+					connectedPlugins={ connectedPlugins }
+					disconnectingPlugin={ disconnectingPlugin }
+				/>
+				{ disconnectStepComponent }
+				{ renderFallbackOutput() }
+			</div>
+
+			<div className="jp-connection__disconnect-dialog__actions">
+				<div className="jp-row">
+					<div className="lg-col-span-8 md-col-span-9 sm-col-span-4">
+						<p>
+							{ createInterpolateElement(
+								__(
+									'<strong>Need help?</strong> Learn more about the <jpConnectionInfoLink>Jetpack connection</jpConnectionInfoLink> or <jpSupportLink>contact Jetpack support</jpSupportLink>.',
+									'jetpack'
+								),
+								{
+									strong: <strong></strong>,
+									jpConnectionInfoLink: (
+										<ExternalLink
+											href={ getRedirectUrl(
+												'why-the-wordpress-com-connection-is-important-for-jetpack'
+											) }
+											className="jp-connection__disconnect-dialog__link"
+											onClick={ trackLearnClick }
+										/>
+									),
+									jpSupportLink: (
+										<ExternalLink
+											href={ getRedirectUrl( 'jetpack-support' ) }
+											className="jp-connection__disconnect-dialog__link"
+											onClick={ trackSupportClick }
+										/>
+									),
+								}
+							) }
+						</p>
+					</div>
+					<div className="jp-connection__disconnect-dialog__button-wrap lg-col-span-4 md-col-span-7 sm-col-span-4">
+						<Button
+							variant="primary"
+							disabled={ isDisconnecting }
+							onClick={ handleStayConnectedClick }
+							className="jp-connection__disconnect-dialog__btn-dismiss"
+						>
+							{ context === 'plugins'
+								? __( 'Cancel', 'jetpack' )
+								: __( 'Stay connected', 'jetpack', /* dummy arg to avoid bad minification */ 0 ) }
+						</Button>
+						{ renderDisconnectButton() }
+					</div>
+				</div>
+				{ disconnectError && (
+					<p className="jp-connection__disconnect-dialog__error">{ disconnectError }</p>
+				) }
+			</div>
+		</React.Fragment>
+	);
+};
+
+StepDisconnect.propTypes = {
+	/** The title to show for this section. */
+	title: PropTypes.string,
+	/** Whether or not a request to disconnect is in progress. */
+	isDisconnecting: PropTypes.bool,
+	/** Callback function that is triggered by clicking the "Disconnect" button. */
+	onDisconnect: PropTypes.func,
+	/** An error that occurred during a request to disconnect. */
+	disconnectError: PropTypes.bool,
+	/** A component to be rendered as part of this step */
+	disconnectStepComponent: PropTypes.element,
+	/** Plugins that are using the Jetpack connection. */
+	connectedPlugins: PropTypes.array,
+	/** The slug of the plugin that is initiating the disconnection. */
+	disconnectingPlugin: PropTypes.string,
+	/** Callback function that closes the modal. */
+	closeModal: PropTypes.func,
+	/** Where this modal is being rendered. */
+	context: PropTypes.string,
+	/** Callback tracks link/btn clicks */
+	trackModalClick: PropTypes.func,
+};
+
+export default StepDisconnect;

package/components/disconnect-dialog/steps/step-survey.jsx

@@ -0,0 +1,48 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import React from 'react';
+import '../../disconnect-survey/_jp-connect_disconnect-survey-card.scss';
+import DisconnectSurvey from '../../disconnect-survey';
+
+/**
+ * Show the survey step and allow the user to select a response.
+ *
+ * @param {object} props - The properties.
+ * @returns {React.Component} The StepSurvey Component
+ */
+const StepSurvey = props => {
+	const { onExit, onFeedBackProvided, isSubmittingFeedback } = props;
+
+	return (
+		<div className="jp-connection__disconnect-dialog__content">
+			<h1>{ __( 'Before you go, help us improve Jetpack', 'jetpack' ) }</h1>
+			<p className="jp-connection__disconnect-dialog__large-text">
+				{ __( 'Let us know what didn‘t work for you', 'jetpack' ) }
+			</p>
+			<DisconnectSurvey
+				onSubmit={ onFeedBackProvided }
+				isSubmittingFeedback={ isSubmittingFeedback }
+			/>
+			<a
+				className="jp-connection__disconnect-dialog__link jp-connection__disconnect-dialog__link--bold"
+				href="#"
+				onClick={ onExit }
+			>
+				{ __( 'Skip for now', 'jetpack' ) }
+			</a>
+		</div>
+	);
+};
+
+StepSurvey.PropTypes = {
+	/** Callback function used to close the modal and leave the disconnect flow. */
+	onExit: PropTypes.func,
+	/** Callback function to handle submission of survey response. */
+	onFeedBackProvided: PropTypes.func,
+	/** If the survey feedback is currently being saved/ submitted */
+	isSubmittingFeedback: PropTypes.bool,
+};
+
+export default StepSurvey;

package/components/disconnect-dialog/steps/step-thank-you.jsx

@@ -0,0 +1,54 @@
+import { DecorativeCard } from '@automattic/jetpack-components';
+import { Button } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import React from 'react';
+import disconnectImage from '../images/disconnect-thanks.jpg';
+
+/**
+ * Show the "thank you" step following survey submission
+ *
+ * @param {object} props - The properties.
+ * @returns {React.Component} - The StepThankYou Component
+ */
+const StepThankYou = props => {
+	const { onExit } = props;
+
+	return (
+		<div className="jp-connection__disconnect-dialog__content">
+			<DecorativeCard format="vertical" imageUrl={ disconnectImage } />
+
+			<div className="jp-connection__disconnect-dialog__copy">
+				<h1>{ __( 'Thank you!', 'jetpack' ) }</h1>
+				<p className="jp-connection__disconnect-dialog__large-text">
+					{ createInterpolateElement(
+						__(
+							'Your answer has been submitted. <br/>Thanks for your input on how we can improve Jetpack.',
+							'jetpack'
+						),
+						{
+							br: <br />,
+						}
+					) }
+				</p>
+				<Button
+					variant="primary"
+					onClick={ onExit }
+					className="jp-connection__disconnect-dialog__btn-back-to-wp"
+				>
+					{ __( 'Back to my website', 'jetpack' ) }
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+StepThankYou.PropTypes = {
+	/** Callback function to close the disconnect modal. */
+	onExit: PropTypes.func,
+	/** Base URL for where webpack-ed images will be stored for the consumer of this component. */
+	assetBaseUrl: PropTypes.string,
+};
+
+export default StepThankYou;

package/components/disconnect-dialog/style.scss

@@ -0,0 +1,218 @@
+@import '@automattic/jetpack-base-styles/style';
+
+.jp-connection__disconnect-dialog {
+	h1 {
+		margin-top: 0;
+		line-height: 1.2;
+		font-size: var( --font-title-small );
+		font-weight: 600;
+	}
+
+	h2 {
+		margin: 0;
+		line-height: 1.2;
+		font-size: var( --font-title-small );
+		font-weight: 400;
+	}
+
+	p {
+		margin-top: 0;
+		font-size: var( --font-body );
+	}
+
+	&__large-text,
+	p.jp-connection__disconnect-dialog__large-text {
+		font-size: 1.25rem;
+	}
+
+	&__link,
+	.jp-connection__disconnect-dialog__link {
+		font-size: var( --font-body );
+		color: var( --jp-black );
+		text-decoration: underline;
+		height: auto;
+		font: inherit;
+		padding: 0;
+
+		&:hover {
+			color: var( --jp-black );
+			text-decoration-thickness: var( --jp-underline-thickness );
+		}
+
+		&:focus {
+			color: var( --jp-black );
+			box-shadow: none !important;
+		}
+
+		&--bold {
+		  font-weight: bold;
+		}
+	}
+
+	.components-button{
+		height: 40px;
+		font-size: var( --font-body-small );
+		border-radius: 4px;
+	}
+
+	.components-modal{
+		&__content{
+			padding: 0;
+			display: flex;
+			flex-direction: column;
+			flex-grow: 1;
+			margin: 0;
+
+			&::before {
+				display: none;
+			}
+		}
+
+		&__header{
+			display: none;
+		}
+	}
+
+	.jp-row {
+		align-items: center;
+		width: calc(100% - 48px); // Help with the margin on the row.
+	}
+
+	&__content{
+		background: var( --jp-white-off );
+		margin: 0;
+		padding: 2rem 1rem;
+		border-radius: 4px;
+		text-align: center;
+		flex-grow: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	&__actions{
+		background: var( --jp-white );
+		padding: 2rem 0;
+		position: sticky;
+		bottom: 0;
+		border-top: 1px solid var( --jp-gray );
+
+		p {
+			margin-bottom: 0;
+		}
+
+		&::before {
+			content: '';
+			display: block;
+			width: 100%;
+			position: absolute;
+			height: 80px;
+			background: linear-gradient(to bottom, rgba( 0,0,0,0 ), var( --jp-white-off ));
+			bottom: calc( 100% + 1px );
+			left: 0;
+		}
+	}
+
+	&__btn-dismiss,
+	&__btn-dismiss.components-button{ // override the components-button class
+		background: var( --jp-black ) !important;
+		margin-right: 10px;
+	}
+
+	&__btn-disconnect{
+		background: var( --jp-red ) !important;
+	}
+
+	&__btn-back-to-wp{
+		background: var( --jp-black ) !important;
+	}
+
+	&__button-wrap{
+		text-align: left;
+
+		@media (min-width: 960px) {
+			text-align: center;
+		}
+	}
+
+	&__error{
+		color: var( --jp-red );
+	}
+
+	&__survey {
+		margin-bottom: 1.5rem;
+		max-width: 100%;
+	}
+
+	// Limit the copy width on the steps.
+	&__step-copy {
+		max-width: 800px;
+		margin: 0 auto;
+
+		&--narrow {
+			max-width: 600px;
+		}
+	}
+}
+
+// When the screen height is shorter, hide the decorative cards to show the text and controls without scrolling.
+.jp-connection__disconnect-dialog__content {
+	@media (max-height: 900px) {
+		.jp-components__decorative-card {
+			display: none;
+		}
+	}
+}
+
+@media (min-width: 600px){
+	.jp-connection__disconnect-dialog,
+	.jp-connection__disconnect-dialog.components-modal__frame {
+		width: 100%;
+		max-width: calc( 100% - 32px );
+	}
+
+	.jp-connection__disconnect-dialog {
+		&__content {
+			padding: 2rem;
+		}
+
+		&__actions {
+			padding: 2rem;
+		}
+	}
+}
+
+
+@media (min-width: 960px){
+	.jp-connection__disconnect-dialog,
+	.jp-connection__disconnect-dialog.components-modal__frame {
+		width: 1200px;
+		height: 900px;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.jp-connection__disconnect-dialog {
+		h1 {
+			font-size: var( --font-title-large );
+		}
+
+		&__large-text,
+		p.jp-connection__disconnect-dialog__large-text {
+			font-size: 1.5rem;
+		}
+
+		&__content {
+			padding: 80px;
+		}
+
+		&__actions {
+			padding: 2rem 3rem;
+		}
+	}
+
+	.jp-row {
+		margin-left: 0px;
+	}
+}

package/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss

@@ -0,0 +1,60 @@
+@import '@automattic/jetpack-base-styles/style';
+
+.jp-connect__disconnect-survey-card {
+	border: 2px solid transparent;
+	width: 800px;
+	max-width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+	border-radius: 4px;
+	text-align: left;
+	padding: 1rem;
+	position: relative;
+	box-shadow: 0 0 15px var( --jp-gray-off );
+
+	&--selected {
+		border-color: var( --jp-black );
+		background: var( --jp-gray-off );
+	}
+
+	&::after {
+		content: '';
+		display: block;
+		width: 5px;
+		height: 5px;
+		position: absolute;
+		top: 50%;
+		right: 1.5rem;
+		border-top: 2px solid var( --jp-black );
+		border-right: 2px solid var( --jp-black );
+		transform: translateY( -50% ) rotate( 45deg );
+	}
+
+	&:hover {
+		cursor: pointer;
+	}
+
+	&:hover,
+	&:focus {
+		&:not( .jp-disconnect-survey-card--selected ) {
+			border-color: var( --jp-black-80 )
+		}
+	}
+
+	&__answer {
+		font-weight: bold;
+		margin: 0;
+		display: flex;
+		align-items: center;
+	}
+}
+
+input.jp-connect__disconnect-survey-card__input {
+	-webkit-appearance: none;
+	border: none;
+	background-color: transparent;
+	color: var( --jp-black-80 );
+	flex-grow: 1;
+	padding-right: 40px;
+	max-width: calc( 100% - 40px );
+}