@automattic/jetpack-connection 0.29.8

package/components/connect-screen/required-plan/index.jsx

@@ -0,0 +1,127 @@
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import React from 'react';
+import useProductCheckoutWorkflow from '../../../hooks/use-product-checkout-workflow';
+import useConnection from '../../use-connection';
+import ConnectScreenRequiredPlanVisual from './visual';
+
+/**
+ * The Connection Screen Visual component for consumers that require a Plan.
+ *
+ * @param {object} props -- The properties.
+ * @returns {React.Component} The `ConnectScreenForRequiredPlan` component.
+ */
+const ConnectScreenRequiredPlan = props => {
+	const {
+		title,
+		autoTrigger,
+		buttonLabel,
+		apiRoot,
+		apiNonce,
+		registrationNonce,
+		from,
+		redirectUri,
+		children,
+		priceBefore,
+		priceAfter,
+		pricingIcon,
+		pricingTitle,
+		pricingCurrencyCode,
+		wpcomProductSlug,
+		siteProductAvailabilityHandler,
+		logo,
+		rna = false,
+	} = props;
+
+	const {
+		handleRegisterSite,
+		siteIsRegistering,
+		userIsConnecting,
+		registrationError,
+		isOfflineMode,
+	} = useConnection( {
+		registrationNonce,
+		redirectUri,
+		apiRoot,
+		apiNonce,
+		autoTrigger,
+		from,
+	} );
+
+	const productSlug = wpcomProductSlug ? wpcomProductSlug : '';
+
+	const { run: handleCheckoutWorkflow, hasCheckoutStarted } = useProductCheckoutWorkflow( {
+		productSlug,
+		redirectUrl: redirectUri,
+		siteProductAvailabilityHandler,
+		from,
+	} );
+
+	const displayButtonError = Boolean( registrationError );
+	const buttonIsLoading = siteIsRegistering || userIsConnecting || hasCheckoutStarted;
+	const handleButtonClick = productSlug ? handleCheckoutWorkflow : handleRegisterSite;
+
+	return (
+		<ConnectScreenRequiredPlanVisual
+			title={ title }
+			buttonLabel={ buttonLabel }
+			priceBefore={ priceBefore }
+			priceAfter={ priceAfter }
+			pricingIcon={ pricingIcon }
+			pricingTitle={ pricingTitle }
+			pricingCurrencyCode={ pricingCurrencyCode }
+			handleButtonClick={ handleButtonClick }
+			displayButtonError={ displayButtonError }
+			buttonIsLoading={ buttonIsLoading }
+			logo={ logo }
+			isOfflineMode={ isOfflineMode }
+			rna={ rna }
+		>
+			{ children }
+		</ConnectScreenRequiredPlanVisual>
+	);
+};
+
+ConnectScreenRequiredPlan.propTypes = {
+	/** The Title. */
+	title: PropTypes.string,
+	/** The Connect Button label. */
+	buttonLabel: PropTypes.string,
+	/** API root. */
+	apiRoot: PropTypes.string.isRequired,
+	/** API nonce. */
+	apiNonce: PropTypes.string.isRequired,
+	/** Registration nonce. */
+	registrationNonce: PropTypes.string.isRequired,
+	/** Where the connection request is coming from. */
+	from: PropTypes.string,
+	/** The redirect admin URI. */
+	redirectUri: PropTypes.string.isRequired,
+	/** Whether to initiate the connection process automatically upon rendering the component. */
+	autoTrigger: PropTypes.bool,
+	/** The Pricing Card Title. */
+	pricingTitle: PropTypes.string.isRequired,
+	/** The Pricing Card Icon. */
+	pricingIcon: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
+	/** Price before discount. */
+	priceBefore: PropTypes.number.isRequired,
+	/** Price after discount. */
+	priceAfter: PropTypes.number.isRequired,
+	/** The Currency code, eg 'USD'. */
+	pricingCurrencyCode: PropTypes.string,
+	/** The WordPress.com product slug. If specified, the connection/authorization flow will go through the Checkout page for this product'. */
+	wpcomProductSlug: PropTypes.string,
+	/** A callback that will be used to check whether the site already has the wpcomProductSlug. This will be checked after registration and the checkout will be skipped if it returns true. */
+	checkSiteHasWpcomProduct: PropTypes.func,
+	/** The logo to display at the top of the component. */
+	logo: PropTypes.element,
+};
+
+ConnectScreenRequiredPlan.defaultProps = {
+	title: __( 'Over 5 million WordPress sites are faster and more secure', 'jetpack' ),
+	buttonLabel: __( 'Set up Jetpack', 'jetpack' ),
+	pricingCurrencyCode: 'USD',
+	autoTrigger: false,
+};
+
+export default ConnectScreenRequiredPlan;

package/components/connect-screen/required-plan/style.scss

@@ -0,0 +1,109 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+
+.jp-connection__connect-screen-layout__left {
+	/**
+	  * Start with 100% width;
+	  * then account for a 384px pricing card that floats to the right;
+	  * finally give 32px of padding between content and the pricing card
+	  */
+	@include break-xlarge {
+		width: calc(100% - 384px - var(--spacing-base) * 4);
+	}
+}
+
+.jp-connection__connect-screen-required-plan {
+	@include break-xlarge {
+		position: relative;
+		background: linear-gradient(to right, white 70%, #f9f9f6 30%);
+	}
+
+	&__loading {
+		display: none;
+	}
+
+	/** There's a header above this list, which makes the top spacing
+	  * look a bit taller than it actually is
+	  */
+	ul.jp-product-promote {
+		margin-block-start: calc(var(--spacing-base) * 3);
+		margin-block-end: calc(var(--spacing-base) * 4);
+	}
+
+	&__pricing-card {
+		/** Line up with the top of the product logo,
+		  * and mirror 96px horizontal padding seen in
+		  * .jp-connection__connect-screen-layout__left
+		 */
+		@include break-xlarge {
+			position: absolute;
+			top: calc(var(--spacing-base) * 8);
+			right: calc(var(--spacing-base) * 12);
+		}
+
+		.jp-action-button--button.components-button {
+			width: 100%;
+			height: auto;
+			font-size: 18px;
+			font-weight: 500;
+			background: var(--jp-black) !important;
+			color: var(--jp-white) !important;
+			border-radius: var(--jp-border-radius);
+			padding: 14px 24px;
+			margin: 24px 0px 32px;
+			justify-content: center;
+			align-items: center;
+
+			&:disabled {
+				background: var(--jp-gray)  !important;
+				color: var(--jp-gray-20)  !important;
+			}
+		}
+
+		.terms-of-service {
+			margin-top: calc(var(--spacing-base) * 4);
+			margin-bottom: var(--spacing-base);
+		}
+	}
+
+	&__with-subscription {
+		margin-top: calc(var(--spacing-base) * 4);
+
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+		gap: 1ch;
+		line-height: 1;
+
+		.jp-action-button--button.components-button.is-primary {
+			display: inline;
+			font-size: var(--font-title-small);
+			line-height: 20px;
+			color: var(--jp-black) !important;
+			background: inherit !important;
+			text-decoration: underline;
+
+			width: auto;
+			min-width: 0;
+			height: auto;
+			font: inherit;
+			padding: 0;
+
+			&:hover {
+				background: inherit;
+				text-decoration-thickness: var(--jp-underline-thickness);
+			}
+
+			&:focus {
+				background: inherit;
+				box-shadow: none !important;
+			}
+		}
+
+		.jp-components-spinner__inner,
+		.jp-components-spinner__outer {
+			border-top-color: var(--jp-black);
+			border-right-color: var(--jp-black);
+		}
+	}
+}

package/components/connect-screen/required-plan/visual.jsx

@@ -0,0 +1,151 @@
+import {
+	ActionButton,
+	getRedirectUrl,
+	PricingCard,
+	TermsOfService,
+} from '@automattic/jetpack-components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
+import debugFactory from 'debug';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ConnectScreenLayout from '../layout';
+import './style.scss';
+
+const debug = debugFactory( 'jetpack:connection:ConnectScreenRequiredPlanVisual' );
+
+/**
+ * The Connection Screen Visual component for consumers that require a Plan.
+ *
+ * @param {object} props -- The properties.
+ * @returns {React.Component} The `ConnectScreenRequiredPlanVisual` component.
+ */
+const ConnectScreenRequiredPlanVisual = props => {
+	const {
+		title,
+		buttonLabel,
+		children,
+		priceBefore,
+		priceAfter,
+		pricingIcon,
+		pricingTitle,
+		pricingCurrencyCode,
+		isLoading,
+		handleButtonClick,
+		displayButtonError,
+		buttonIsLoading,
+		logo,
+		isOfflineMode,
+		rna = false,
+	} = props;
+
+	debug( 'props are %o', props );
+
+	const withSubscription = createInterpolateElement(
+		__( 'Already have a subscription? <connectButton/>', 'jetpack' ),
+		{
+			connectButton: (
+				<ActionButton
+					label={ __( 'Log in to get started', 'jetpack' ) }
+					onClick={ handleButtonClick }
+					isLoading={ buttonIsLoading }
+				/>
+			),
+		}
+	);
+
+	const errorMessage = isOfflineMode
+		? createInterpolateElement( __( 'Unavailable in <a>Offline Mode</a>', 'jetpack' ), {
+				a: (
+					<a
+						href={ getRedirectUrl( 'jetpack-support-development-mode' ) }
+						target="_blank"
+						rel="noopener noreferrer"
+					/>
+				),
+		  } )
+		: undefined;
+
+	return (
+		<ConnectScreenLayout
+			title={ title }
+			className={ classNames(
+				'jp-connection__connect-screen-required-plan',
+				isLoading ? 'jp-connection__connect-screen-required-plan__loading' : '',
+				rna ? 'rna' : ''
+			) }
+			logo={ logo }
+			rna={ rna }
+		>
+			<div className="jp-connection__connect-screen-required-plan__content">
+				{ children }
+
+				<div className="jp-connection__connect-screen-required-plan__pricing-card">
+					<PricingCard
+						title={ pricingTitle }
+						icon={ pricingIcon }
+						priceBefore={ priceBefore }
+						currencyCode={ pricingCurrencyCode }
+						priceAfter={ priceAfter }
+					>
+						<TermsOfService agreeButtonLabel={ buttonLabel } />
+						<ActionButton
+							label={ buttonLabel }
+							onClick={ handleButtonClick }
+							displayError={ displayButtonError || isOfflineMode }
+							errorMessage={ errorMessage }
+							isLoading={ buttonIsLoading }
+							isDisabled={ isOfflineMode }
+						/>
+					</PricingCard>
+				</div>
+
+				{ ! isOfflineMode && (
+					<div className="jp-connection__connect-screen-required-plan__with-subscription">
+						{ withSubscription }
+					</div>
+				) }
+			</div>
+		</ConnectScreenLayout>
+	);
+};
+
+ConnectScreenRequiredPlanVisual.propTypes = {
+	/** The Pricing Card Title. */
+	pricingTitle: PropTypes.string.isRequired,
+	/** Price before discount. */
+	priceBefore: PropTypes.number.isRequired,
+	/** Price after discount. */
+	priceAfter: PropTypes.number.isRequired,
+	/** The Currency code, eg 'USD'. */
+	pricingCurrencyCode: PropTypes.string,
+	/** The Title. */
+	title: PropTypes.string,
+	/** The Connect Button label. */
+	buttonLabel: PropTypes.string,
+	/** The Pricing Card Icon. */
+	pricingIcon: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
+	/** Whether the connection status is still loading. */
+	isLoading: PropTypes.bool,
+	/** Callback that is applied into click for all buttons. */
+	handleButtonClick: PropTypes.func,
+	/** Whether the button error is active or not. */
+	displayButtonError: PropTypes.bool,
+	/** Whether the button loading state is active or not. */
+	buttonIsLoading: PropTypes.bool,
+	/** The logo to display at the top of the component. */
+	logo: PropTypes.element,
+	/** Whether the site is in offline mode. */
+	isOfflineMode: PropTypes.bool,
+};
+
+ConnectScreenRequiredPlanVisual.defaultProps = {
+	pricingCurrencyCode: 'USD',
+	isLoading: false,
+	buttonIsLoading: false,
+	displayButtonError: false,
+	handleButtonClick: () => {},
+};
+
+export default ConnectScreenRequiredPlanVisual;

package/components/connect-user/index.jsx

@@ -0,0 +1,64 @@
+import restApi from '@automattic/jetpack-api';
+import PropTypes from 'prop-types';
+import { useState, useEffect } from 'react';
+
+/**
+ * The user connection component.
+ *
+ * @param {object} props -- The properties.
+ * @param {Function} props.redirectFunc -- The redirect function (`window.location.assign()` by default).
+ * @param {string} props.connectUrl -- The authorization URL (no-iframe).
+ * @param {string} props.redirectUri -- The redirect admin URI.
+ * @param {string} props.from -- Where the connection request is coming from.
+ * @returns {null} -- Nothing to return.
+ */
+const ConnectUser = props => {
+	const { redirectFunc, connectUrl, redirectUri, from } = props;
+
+	const [ authorizationUrl, setAuthorizationUrl ] = useState( null );
+
+	if ( connectUrl && connectUrl !== authorizationUrl ) {
+		setAuthorizationUrl( connectUrl );
+	}
+
+	/**
+	 * Fetch the authorization URL on the first render.
+	 * To be only run once.
+	 */
+	useEffect( () => {
+		if ( ! authorizationUrl ) {
+			restApi
+				.fetchAuthorizationUrl( redirectUri )
+				.then( response => setAuthorizationUrl( response.authorizeUrl ) )
+				.catch( error => {
+					throw error;
+				} );
+		}
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
+
+	if ( ! authorizationUrl ) {
+		return null;
+	}
+
+	redirectFunc(
+		authorizationUrl +
+			( from
+				? ( authorizationUrl.includes( '?' ) ? '&' : '?' ) + 'from=' + encodeURIComponent( from )
+				: '' )
+	);
+	return null;
+};
+
+ConnectUser.propTypes = {
+	connectUrl: PropTypes.string,
+	redirectUri: PropTypes.string.isRequired,
+	from: PropTypes.string,
+	redirectFunc: PropTypes.func,
+};
+
+ConnectUser.defaultProps = {
+	redirectFunc: url => window.location.assign( url ),
+	redirectUri: null,
+};
+
+export default ConnectUser;

package/components/connected-plugins/index.jsx

@@ -0,0 +1,67 @@
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
+import DisconnectCard from '../disconnect-card';
+
+/**
+ * Render a list of connected plugins.
+ *
+ * @param {object} props - The properties
+ * @returns {React.Component} - The ConnectedPlugins React component
+ */
+
+const ConnectedPlugins = props => {
+	const { connectedPlugins, disconnectingPlugin } = props;
+
+	/**
+	 * Add a slug property to each ConnectedPlugins object so they can be converted to an array.
+	 * This allows the connected plugins to be iterated over more easily for display.
+	 */
+	const connectedPluginsArray = useMemo( () => {
+		if ( connectedPlugins ) {
+			const keys = Object.keys( connectedPlugins );
+			return keys
+				.map( key => {
+					return Object.assign( { slug: key }, connectedPlugins[ key ] );
+				} )
+				.filter( plugin => {
+					return disconnectingPlugin !== plugin.slug;
+				} );
+		}
+
+		// No connected plugins.
+		return [];
+	}, [ connectedPlugins, disconnectingPlugin ] );
+
+	if ( connectedPlugins && connectedPluginsArray.length > 0 ) {
+		return (
+			<React.Fragment>
+				<div className="jp-connection__disconnect-dialog__step-copy">
+					<p className="jp-connection__disconnect-dialog__large-text">
+						{ __(
+							'Jetpack is powering other plugins on your site. If you disconnect, these plugins will no longer work.',
+							'jetpack'
+						) }
+					</p>
+				</div>
+				<div className="jp-connection__disconnect-card__group">
+					{ connectedPluginsArray.map( plugin => {
+						return <DisconnectCard title={ plugin.name } key={ plugin.slug } />;
+					} ) }
+				</div>
+			</React.Fragment>
+		);
+	}
+
+	// Default to null if there are no connected plugins passed on the props
+	return null;
+};
+
+ConnectedPlugins.propTypes = {
+	/** Plugins that are using the Jetpack connection. */
+	connectedPlugins: PropTypes.array,
+	/** Slug of the plugin that has initiated the disconnect. */
+	disconnectingPlugin: PropTypes.string,
+};
+
+export default ConnectedPlugins;

package/components/connection-error-notice/index.jsx

@@ -0,0 +1,110 @@
+import { Spinner, useBreakpointMatch } from '@automattic/jetpack-components';
+import { Icon, Notice, Path, SVG } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './styles.module.scss';
+
+/**
+ * The RNA Connection Error Notice component.
+ *
+ * @param {object} props -- The properties.
+ * @returns {React.Component} The `ConnectionErrorNotice` component.
+ */
+const ConnectionErrorNotice = props => {
+	const { message, isRestoringConnection, restoreConnectionCallback, restoreConnectionError } =
+		props;
+
+	const [ isBiggerThanMedium ] = useBreakpointMatch( [ 'md' ], [ '>' ] );
+	const wrapperClassName =
+		styles.notice + ( isBiggerThanMedium ? ' ' + styles[ 'bigger-than-medium' ] : '' );
+
+	const icon = (
+		<Icon
+			icon={
+				<SVG
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<Path
+						d="M11.7815 4.93772C11.8767 4.76626 12.1233 4.76626 12.2185 4.93772L20.519 19.8786C20.6116 20.0452 20.4911 20.25 20.3005 20.25H3.69951C3.50889 20.25 3.3884 20.0452 3.48098 19.8786L11.7815 4.93772Z"
+						stroke="#D63638"
+						strokeWidth="1.5"
+					/>
+					<Path d="M13 10H11V15H13V10Z" fill="#D63638" />
+					<Path d="M13 16H11V18H13V16Z" fill="#D63638" />
+				</SVG>
+			}
+		/>
+	);
+
+	if ( ! message ) {
+		return null;
+	}
+
+	if ( isRestoringConnection ) {
+		return (
+			<Notice status={ 'error' } isDismissible={ false } className={ wrapperClassName }>
+				<div className={ styles.message }>
+					<Spinner color="#B32D2E" size={ 24 } />
+					{ __( 'Reconnecting Jetpack', 'jetpack' ) }
+				</div>
+			</Notice>
+		);
+	}
+
+	const errorRender = restoreConnectionError ? (
+		<Notice
+			status={ 'error' }
+			isDismissible={ false }
+			className={ wrapperClassName + ' ' + styles.error }
+		>
+			<div className={ styles.message }>
+				{ icon }
+				{ sprintf(
+					/* translators: placeholder is the error. */
+					__( 'There was an error reconnecting Jetpack. Error: %s', 'jetpack' ),
+					restoreConnectionError
+				) }
+			</div>
+		</Notice>
+	) : null;
+
+	return (
+		<>
+			{ errorRender }
+			<Notice status={ 'error' } isDismissible={ false } className={ wrapperClassName }>
+				<div className={ styles.message }>
+					{ icon }
+					{ message }
+				</div>
+				{ restoreConnectionCallback && (
+					<a
+						onClick={ restoreConnectionCallback }
+						onKeyDown={ restoreConnectionCallback }
+						className={ styles.button }
+						href="#"
+					>
+						{ __( 'Restore Connection', 'jetpack' ) }
+					</a>
+				) }
+			</Notice>
+		</>
+	);
+};
+
+ConnectionErrorNotice.propTypes = {
+	/** The notice message. */
+	message: PropTypes.string.isRequired,
+	/** "Restore Connection" button callback. */
+	restoreConnectionCallback: PropTypes.func,
+	/** Whether connection restore is in progress. */
+	isRestoringConnection: PropTypes.bool,
+	/** The connection error text if there is one. */
+	restoreConnectionError: PropTypes.string,
+};
+
+export default ConnectionErrorNotice;