@automattic/jetpack-connection 0.29.8

package/components/disconnect-survey/index.jsx

@@ -0,0 +1,181 @@
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import React, { useCallback, useState } from 'react';
+import SurveyChoice from './survey-choice';
+
+/**
+ * Handles showing the disconnect survey.
+ *
+ * @param {object} props - The component props.
+ * @returns {React.Component} - DisconnectSurvey component.
+ */
+const DisconnectSurvey = props => {
+	const { onSubmit, isSubmittingFeedback } = props;
+	const [ selectedAnswer, setSelectedAnswer ] = useState();
+	const [ customResponse, setCustomResponse ] = useState();
+
+	const options = [
+		{
+			id: 'troubleshooting',
+			answerText: __( "Troubleshooting - I'll be reconnecting afterwards.", 'jetpack' ),
+		},
+		{
+			id: 'not-working',
+			answerText: __( "I can't get it to work.", 'jetpack' ),
+		},
+		{
+			id: 'slowed-down-site',
+			answerText: __( 'It slowed down my site.', 'jetpack' ),
+		},
+		{
+			id: 'buggy',
+			answerText: __( "It's buggy.", 'jetpack' ),
+		},
+		{
+			id: 'what-does-it-do',
+			answerText: __( "I don't know what it does.", 'jetpack' ),
+		},
+	];
+
+	const customOption = {
+		id: 'another-reason',
+	};
+
+	/**
+	 * Handle Submission of the survey.
+	 * Will send the survey response to the collection endpoint.
+	 */
+	const handleSurveySubmit = useCallback( () => {
+		const answerText = selectedAnswer === customOption.id ? customResponse : '';
+		onSubmit( selectedAnswer, answerText );
+	}, [ onSubmit, customOption.id, customResponse, selectedAnswer ] );
+
+	/**
+	 * Handle input into the custom response field.
+	 *
+	 * @param {object} e - onChange event for the custom input
+	 */
+	const handleCustomResponse = useCallback(
+		e => {
+			const value = e.target.value;
+			e.stopPropagation();
+			setCustomResponse( value );
+		},
+		[ setCustomResponse ]
+	);
+
+	/**
+	 * Checks to see if an option is the currently selected option, returns a css class name if it matches.
+	 *
+	 * @param {string} optionId   - ID of the option to check for.
+	 * @returns {string} - The "selected" class if this option is currently selected.
+	 */
+	const selectedClass = optionId => {
+		if ( optionId === selectedAnswer ) {
+			return 'jp-connect__disconnect-survey-card--selected';
+		}
+
+		return '';
+	};
+
+	/**
+	 * Event handler for keyboard events on the answer blocks.
+	 *
+	 * @param {string} answerId - The slug of the answer that has been selected.
+	 * @param {object} e - Keydown event.
+	 */
+	const handleAnswerKeyDown = useCallback(
+		( answerId, e ) => {
+			switch ( e.key ) {
+				case 'Enter':
+				case 'Space':
+				case 'Spacebar':
+				case ' ':
+					setSelectedAnswer( answerId );
+					break;
+			}
+		},
+		[ setSelectedAnswer ]
+	);
+
+	/**
+	 * Show all the survey options from the options array.
+	 *
+	 * @returns {React.ElementType []} - Mapped array of rendered survey options.
+	 */
+	const renderOptions = () => {
+		return options.map( option => {
+			return (
+				<SurveyChoice
+					id={ option.id }
+					onClick={ setSelectedAnswer }
+					onKeyDown={ handleAnswerKeyDown }
+					className={ 'card jp-connect__disconnect-survey-card ' + selectedClass( option.id ) }
+				>
+					<p className="jp-connect__disconnect-survey-card__answer">{ option.answerText }</p>
+				</SurveyChoice>
+			);
+		} );
+	};
+
+	/**
+	 * Show the custom input survey option.
+	 * Contains an input field for a custom response.
+	 *
+	 * @returns {React.ElementType} - The custom survey option with an input field.
+	 */
+	const renderCustomOption = () => {
+		return (
+			<SurveyChoice
+				id={ customOption.id }
+				key={ customOption.id }
+				onClick={ setSelectedAnswer }
+				onKeyDown={ handleAnswerKeyDown }
+				className={ 'card jp-connect__disconnect-survey-card ' + selectedClass( customOption.id ) }
+			>
+				<p className="jp-connect__disconnect-survey-card__answer">
+					{ __( 'Other:', 'jetpack' ) }{ ' ' }
+					<input
+						placeholder={ __( 'share your experience', 'jetpack' ) }
+						className="jp-connect__disconnect-survey-card__input"
+						type="text"
+						value={ customResponse }
+						onChange={ handleCustomResponse }
+						maxLength={ 1000 } // Limit response length.
+					/>
+				</p>
+			</SurveyChoice>
+		);
+	};
+
+	return (
+		<React.Fragment>
+			<div className="jp-connection__disconnect-dialog__survey">
+				{ renderOptions() }
+				{ renderCustomOption() }
+			</div>
+			<p>
+				<Button
+					disabled={ ! selectedAnswer || isSubmittingFeedback }
+					variant="primary"
+					onClick={ handleSurveySubmit }
+					className="jp-connection__disconnect-dialog__btn-back-to-wp"
+				>
+					{ isSubmittingFeedback
+						? __( 'Submitting…', 'jetpack' )
+						: __( 'Submit Feedback', 'jetpack', /* dummy arg to avoid bad minification */ 0 ) }
+				</Button>
+			</p>
+		</React.Fragment>
+	);
+};
+
+DisconnectSurvey.PropTypes = {
+	/** Callback handler function for when the survey response is submitted. */
+	onSubmit: PropTypes.func,
+	/** If the survey feedback is currently being saved/ submitted */
+	isSubmittingFeedback: PropTypes.bool,
+};
+
+export default DisconnectSurvey;

package/components/disconnect-survey/survey-choice.jsx

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+
+import './_jp-connect_disconnect-survey-card.scss';
+
+/**
+ * SurveyChoice - Present one choice in the survey.
+ *
+ * @param {string} props.id - The ID/slug string of the survey option
+ * @param {Function} props.onClick - Event handler for clicking on the survey option.
+ * @param {Function} props.onKeydown - Event handler for pressing a key on the survey option.
+ * @param {React.ElementType} props.children - Any passed elements as children to this component.
+ * @param {string} props.className - A class name to apply to the survey choice.
+ * @returns {React.Component} SurveyChoice - The SurveyChoice component.
+ */
+
+const SurveyChoice = props => {
+	const { id, onClick, onKeyDown, children, className } = props;
+
+	const handleClick = useCallback( () => {
+		onClick( id );
+	}, [ id, onClick ] );
+
+	const handleKeyDown = useCallback(
+		e => {
+			onKeyDown( id, e );
+		},
+		[ id, onKeyDown ]
+	);
+
+	return (
+		<div
+			tabIndex="0"
+			role="button"
+			onClick={ handleClick }
+			onKeyDown={ handleKeyDown }
+			className={ 'card jp-connect__disconnect-survey-card ' + className }
+		>
+			{ children }
+		</div>
+	);
+};
+
+export default SurveyChoice;

package/components/in-place-connection/index.jsx

@@ -0,0 +1,140 @@
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef } from 'react';
+
+import './style.scss';
+
+/**
+ * The in-place connection component.
+ *
+ * @param {object} props -- The properties.
+ * @param {string} props.title -- Element title.
+ * @param {boolean} props.isLoading -- Whether the element is still loading.
+ * @param {string|number} props.width -- Iframe width.
+ * @param {string|number} props.height -- Iframe height.
+ * @param {boolean} props.displayTOS -- Whether the site has connection owner connected.
+ * @param {boolean} props.scrollToIframe -- Whether we need to auto-scroll the window upon element rendering.
+ * @param {string} props.connectUrl -- The connection URL.
+ * @param {Function} props.onComplete -- The callback to be called upon complete of the connection process.
+ * @param {Function} props.onThirdPartyCookiesBlocked -- The callback to be called if third-party cookies are disabled.
+ * @param {string} props.location -- Component location identifier passed to WP.com.
+ * @returns {React.Component} The in-place connection component.
+ */
+const InPlaceConnection = props => {
+	const {
+		title,
+		isLoading,
+		width,
+		displayTOS,
+		scrollToIframe,
+		connectUrl,
+		onComplete,
+		onThirdPartyCookiesBlocked,
+		location,
+	} = props;
+	let { height } = props;
+
+	const iframeWrapRef = useRef();
+	const iframeRef = useRef();
+
+	/**
+	 * Handles messages received from inside the iframe.
+	 *
+	 * @param {object} e -- Event object.
+	 */
+	const receiveData = e => {
+		if ( ! iframeRef.current || e.source !== iframeRef.current.contentWindow ) {
+			return;
+		}
+
+		switch ( e.data ) {
+			case 'close':
+				// Remove listener, our job here is done.
+				window.removeEventListener( 'message', receiveData );
+
+				if ( onComplete ) {
+					onComplete();
+				}
+				break;
+			case 'wpcom_nocookie':
+				// Third-party cookies blocked.
+				if ( onThirdPartyCookiesBlocked ) {
+					onThirdPartyCookiesBlocked();
+				}
+				break;
+		}
+	};
+
+	useEffect(
+		/**
+		 * The component initialization.
+		 */
+		() => {
+			// Scroll to the iframe container
+			if ( scrollToIframe ) {
+				window.scrollTo( 0, iframeWrapRef.current.offsetTop - 10 );
+			}
+
+			// Add an event listener to identify successful authorization via iframe.
+			window.addEventListener( 'message', receiveData );
+		}
+	);
+
+	// The URL looks like https://jetpack.wordpress.com/jetpack.authorize_iframe/1/. We need to include the trailing
+	// slash below so that we don't end up with something like /jetpack.authorize_iframe_iframe/
+	let src = connectUrl.replace( 'authorize/', 'authorize_iframe/' );
+
+	if ( ! src.includes( '?' ) ) {
+		src += '?';
+	}
+
+	if ( displayTOS ) {
+		src += '&display-tos';
+		height = ( parseInt( height ) + 50 ).toString();
+	}
+
+	src += '&iframe_height=' + parseInt( height );
+
+	if ( location ) {
+		src += '&iframe_source=' + location;
+	}
+
+	return (
+		<div className="dops-card fade-in jp-iframe-wrap" ref={ iframeWrapRef }>
+			<h1>{ title }</h1>
+			{ isLoading ? (
+				<p>{ __( 'Loading…', 'jetpack' ) }</p>
+			) : (
+				<iframe
+					title={ title }
+					width={ width }
+					height={ height }
+					src={ src }
+					ref={ iframeRef }
+				></iframe>
+			) }
+		</div>
+	);
+};
+
+InPlaceConnection.propTypes = {
+	title: PropTypes.string.isRequired,
+	isLoading: PropTypes.bool,
+	width: PropTypes.string,
+	height: PropTypes.string,
+	connectUrl: PropTypes.string.isRequired,
+	displayTOS: PropTypes.bool.isRequired,
+	scrollToIframe: PropTypes.bool,
+	onComplete: PropTypes.func,
+	onThirdPartyCookiesBlocked: PropTypes.func,
+	location: PropTypes.string,
+};
+
+InPlaceConnection.defaultProps = {
+	isLoading: false,
+	height: '300',
+	width: '100%',
+	scrollToIframe: false,
+};
+
+export default InPlaceConnection;

package/components/in-place-connection/style.scss

@@ -0,0 +1,35 @@
+.jp-iframe-wrap {
+	text-align: center;
+}
+
+.fade-in {
+	animation: fadeIn ease 1.5s;
+	-webkit-animation: fadeIn ease 1.5s;
+	-moz-animation: fadeIn ease 1.5s;
+	-o-animation: fadeIn ease 1.5s;
+	-ms-animation: fadeIn ease 1.5s;
+}
+@keyframes fadeIn {
+	0% {opacity:0;}
+	100% {opacity:1;}
+}
+
+@-moz-keyframes fadeIn {
+	0% {opacity:0;}
+	100% {opacity:1;}
+}
+
+@-webkit-keyframes fadeIn {
+	0% {opacity:0;}
+	100% {opacity:1;}
+}
+
+@-o-keyframes fadeIn {
+	0% {opacity:0;}
+	100% {opacity:1;}
+}
+
+@-ms-keyframes fadeIn {
+	0% {opacity:0;}
+	100% {opacity:1;}
+}

package/components/manage-connection-dialog/index.jsx

@@ -0,0 +1,219 @@
+/**
+ * External dependencies
+ */
+import { Button, getRedirectUrl, Text } from '@automattic/jetpack-components';
+import { ExternalLink, Modal } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, chevronRight, external } from '@wordpress/icons';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useCallback, useState } from 'react';
+/**
+ * Internal dependencies
+ */
+import DisconnectDialog from '../disconnect-dialog';
+import './style.scss';
+
+/**
+ * The RNA Manage Connection Dialog component.
+ *
+ * @param {object} props -- The properties.
+ * @returns {React.Component} The `ManageConnectionDialog` component.
+ */
+const ManageConnectionDialog = props => {
+	const {
+		title,
+		apiRoot,
+		apiNonce,
+		connectedPlugins,
+		onDisconnected,
+		context,
+		connectedUser,
+		connectedSiteId,
+		isOpen,
+		onClose,
+	} = props;
+
+	const [ isDisconnectDialogOpen, setIsDisconnectDialogOpen ] = useState( false );
+
+	/**
+	 * Open the Disconnect Dialog.
+	 */
+	const openDisconnectDialog = useCallback(
+		e => {
+			e && e.preventDefault();
+			setIsDisconnectDialogOpen( true );
+		},
+		[ setIsDisconnectDialogOpen ]
+	);
+
+	/**
+	 * Close the Disconnect Dialog.
+	 */
+	const closeDisconnectDialog = useCallback(
+		e => {
+			e && e.preventDefault();
+			setIsDisconnectDialogOpen( false );
+		},
+		[ setIsDisconnectDialogOpen ]
+	);
+
+	return (
+		<>
+			{ isOpen && (
+				<>
+					<Modal
+						title=""
+						contentLabel={ title }
+						aria={ {
+							labelledby: 'jp-connection__manage-dialog__heading',
+						} }
+						shouldCloseOnClickOutside={ false }
+						shouldCloseOnEsc={ false }
+						isDismissible={ false }
+						className={ 'jp-connection__manage-dialog' }
+					>
+						<div className="jp-connection__manage-dialog__content">
+							<h1 id="jp-connection__manage-dialog__heading">{ title }</h1>
+							<Text className="jp-connection__manage-dialog__large-text">
+								{ __(
+									'At least one user must be connected for your Jetpack products to work properly.',
+									'jetpack'
+								) }
+							</Text>
+							<ManageConnectionActionCard
+								title={ __( 'Transfer ownership to another admin', 'jetpack' ) }
+								link={ getRedirectUrl( 'calypso-settings-manage-connection', {
+									site: window?.myJetpackInitialState?.siteSuffix,
+								} ) }
+								key="transfer"
+								action="transfer"
+							/>
+							<ManageConnectionActionCard
+								title={ __( 'Disconnect Jetpack', 'jetpack' ) }
+								onClick={ openDisconnectDialog }
+								key="disconnect"
+								action="disconnect"
+							/>
+						</div>
+						<HelpFooter onClose={ onClose } />
+					</Modal>
+
+					<DisconnectDialog
+						apiRoot={ apiRoot }
+						apiNonce={ apiNonce }
+						onDisconnected={ onDisconnected }
+						connectedPlugins={ connectedPlugins }
+						connectedSiteId={ connectedSiteId }
+						connectedUser={ connectedUser }
+						isOpen={ isDisconnectDialogOpen }
+						onClose={ closeDisconnectDialog }
+						context={ context }
+					/>
+				</>
+			) }
+		</>
+	);
+};
+
+const ManageConnectionActionCard = ( { title, onClick = () => null, link = '#', action } ) => {
+	return (
+		<div className="jp-connection__manage-dialog__action-card card">
+			<div className="jp-connection__manage-dialog__action-card__card-content">
+				<a
+					href={ link }
+					className={ classNames(
+						'jp-connection__manage-dialog__action-card__card-headline',
+						action
+					) }
+					onClick={ onClick }
+				>
+					{ title }
+					<Icon
+						icon={ action === 'disconnect' ? chevronRight : external }
+						className="jp-connection__manage-dialog__action-card__icon"
+					/>
+				</a>
+			</div>
+		</div>
+	);
+};
+
+const HelpFooter = ( { onClose } ) => {
+	return (
+		<div className="jp-row jp-connection__manage-dialog__actions">
+			<div className="jp-connection__manage-dialog__text-wrap lg-col-span-9 md-col-span-7 sm-col-span-3">
+				<Text>
+					{ createInterpolateElement(
+						__(
+							'<strong>Need help?</strong> Learn more about the <connectionInfoLink>Jetpack connection</connectionInfoLink> or <supportLink>contact Jetpack support</supportLink>',
+							'jetpack'
+						),
+						{
+							strong: <strong></strong>,
+							connectionInfoLink: (
+								<ExternalLink
+									href={ getRedirectUrl(
+										'why-the-wordpress-com-connection-is-important-for-jetpack'
+									) }
+									className="jp-connection__manage-dialog__link"
+									// TODO add click track
+								/>
+							),
+							supportLink: (
+								<ExternalLink
+									href={ getRedirectUrl( 'jetpack-support' ) }
+									className="jp-connection__manage-dialog__link"
+									// TODO add click track
+								/>
+							),
+						}
+					) }
+				</Text>
+			</div>
+			<div className="jp-connection__manage-dialog__button-wrap lg-col-span-3 md-col-span-1 sm-col-span-1">
+				<Button
+					weight="regular"
+					variant="secondary"
+					onClick={ onClose }
+					className="jp-connection__manage-dialog__btn-dismiss"
+				>
+					{ __( 'Cancel', 'jetpack' ) }
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+ManageConnectionDialog.propTypes = {
+	/** The modal title. */
+	title: PropTypes.string,
+	/** API root URL, required. */
+	apiRoot: PropTypes.string.isRequired,
+	/** API Nonce, required. */
+	apiNonce: PropTypes.string.isRequired,
+	/** Plugins that are using the Jetpack connection. */
+	connectedPlugins: PropTypes.oneOfType( [ PropTypes.array, PropTypes.object ] ),
+	/** The callback to be called upon disconnection success. */
+	onDisconnected: PropTypes.func,
+	/** The context in which this component is being used. */
+	context: PropTypes.string,
+	/** An object representing the connected user. */
+	connectedUser: PropTypes.object,
+	/** ID of the currently connected site. */
+	connectedSiteId: PropTypes.number,
+	/** Whether or not the dialog modal should be open. */
+	isOpen: PropTypes.bool,
+	/** Callback function for when the modal closes. */
+	onClose: PropTypes.func,
+};
+
+ManageConnectionDialog.defaultProps = {
+	title: __( 'Manage your Jetpack connection', 'jetpack' ),
+	isOpen: false,
+	context: 'jetpack-dashboard',
+	connectedUser: {}, // Pass empty object to avoid undefined errors.
+};
+
+export default ManageConnectionDialog;