@automattic/jetpack-connection 0.29.8

package/components/connect-button/index.jsx

@@ -0,0 +1,70 @@
+import { ActionButton } from '@automattic/jetpack-components';
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import React from 'react';
+import useConnection from '../use-connection';
+
+/**
+ * The RNA connection component.
+ *
+ * @param {object} props -- The properties.
+ * @returns {React.Component} The RNA connection component.
+ */
+const ConnectButton = props => {
+	const { apiRoot, apiNonce, connectLabel, registrationNonce, redirectUri, from, autoTrigger } =
+		props;
+
+	const {
+		handleRegisterSite,
+		isRegistered,
+		isUserConnected,
+		siteIsRegistering,
+		userIsConnecting,
+		registrationError,
+	} = useConnection( {
+		registrationNonce,
+		redirectUri,
+		apiRoot,
+		apiNonce,
+		autoTrigger,
+		from,
+	} );
+
+	return (
+		<>
+			{ ( ! isRegistered || ! isUserConnected ) && (
+				<ActionButton
+					label={ connectLabel }
+					onClick={ handleRegisterSite }
+					displayError={ registrationError ? true : false }
+					isLoading={ siteIsRegistering || userIsConnecting }
+				/>
+			) }
+		</>
+	);
+};
+
+ConnectButton.propTypes = {
+	/** The "Connect" button label. */
+	connectLabel: PropTypes.string,
+	/** API root URL. */
+	apiRoot: PropTypes.string.isRequired,
+	/** API Nonce. */
+	apiNonce: PropTypes.string.isRequired,
+	/** Where the connection request is coming from. */
+	from: PropTypes.string,
+	/** The redirect admin URI. */
+	redirectUri: PropTypes.string.isRequired,
+	/** Registration nonce. */
+	registrationNonce: PropTypes.string.isRequired,
+	/** Whether to initiate the connection process automatically upon rendering the component. */
+	autoTrigger: PropTypes.bool,
+};
+
+ConnectButton.defaultProps = {
+	connectLabel: __( 'Connect', 'jetpack' ),
+	redirectUri: null,
+	autoTrigger: false,
+};
+
+export default ConnectButton;

package/components/connect-screen/basic/index.jsx

@@ -0,0 +1,104 @@
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import React from 'react';
+import useConnection from '../../use-connection';
+import ConnectScreenVisual from './visual';
+
+/**
+ * The Connection Screen component.
+ *
+ * @param {object} props -- The properties.
+ * @param {string?} props.title -- The Title.
+ * @param {string?} props.buttonLabel -- The Connect Button label.
+ * @param {string} props.apiRoot -- API root.
+ * @param {string} props.apiNonce -- API nonce.
+ * @param {string} props.registrationNonce -- Registration nonce.
+ * @param {string?} props.from -- Where the connection request is coming from.
+ * @param {string} props.redirectUri -- The redirect admin URI.
+ * @param {string[]?} props.images -- Images to display on the right side.
+ * @param {object[]} props.children -- Additional page elements to show before the call to action.
+ * @param {string?} props.assetBaseUrl -- The assets base URL.
+ * @param {object?} props.footer -- Additional page elements to show after the call to action.
+ * @param {boolean?} props.skipUserConnection -- Whether to not require a user connection and just redirect after site connection.
+ * @param {boolean?} props.autoTrigger -- Whether to initiate the connection process automatically upon rendering the component.
+ * @param {object?} props.logo -- The logo to display at the top of the component.
+ * @returns {React.Component} The `ConnectScreen` component.
+ */
+const ConnectScreen = ( {
+	title,
+	buttonLabel,
+	apiRoot,
+	apiNonce,
+	registrationNonce,
+	from,
+	redirectUri,
+	images,
+	children,
+	assetBaseUrl,
+	autoTrigger,
+	footer,
+	skipUserConnection,
+	logo,
+} ) => {
+	const {
+		handleRegisterSite,
+		siteIsRegistering,
+		userIsConnecting,
+		registrationError,
+		isOfflineMode,
+	} = useConnection( {
+		registrationNonce,
+		redirectUri,
+		apiRoot,
+		apiNonce,
+		autoTrigger,
+		from,
+		skipUserConnection,
+	} );
+
+	const displayButtonError = Boolean( registrationError );
+	const buttonIsLoading = siteIsRegistering || userIsConnecting;
+
+	return (
+		<ConnectScreenVisual
+			title={ title }
+			images={ images }
+			assetBaseUrl={ assetBaseUrl }
+			buttonLabel={ buttonLabel }
+			handleButtonClick={ handleRegisterSite }
+			displayButtonError={ displayButtonError }
+			buttonIsLoading={ buttonIsLoading }
+			footer={ footer }
+			isOfflineMode={ isOfflineMode }
+			logo={ logo }
+		>
+			{ children }
+		</ConnectScreenVisual>
+	);
+};
+
+ConnectScreen.propTypes = {
+	title: PropTypes.string,
+	buttonLabel: PropTypes.string,
+	apiRoot: PropTypes.string.isRequired,
+	apiNonce: PropTypes.string.isRequired,
+	registrationNonce: PropTypes.string.isRequired,
+	from: PropTypes.string,
+	redirectUri: PropTypes.string.isRequired,
+	autoTrigger: PropTypes.bool,
+	images: PropTypes.arrayOf( PropTypes.string ),
+	assetBaseUrl: PropTypes.string,
+	skipUserConnection: PropTypes.bool,
+	logo: PropTypes.element,
+};
+
+ConnectScreen.defaultProps = {
+	title: __( 'Over 5 million WordPress sites are faster and more secure', 'jetpack' ),
+	buttonLabel: __( 'Set up Jetpack', 'jetpack' ),
+	images: [],
+	redirectUri: null,
+	autoTrigger: false,
+	skipUserConnection: false,
+};
+
+export default ConnectScreen;

package/components/connect-screen/basic/style.scss

@@ -0,0 +1,46 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+
+.jp-connection__connect-screen {
+	--spacing-base: 8px;
+
+	&__loading {
+		display: none;
+	}
+
+	.terms-of-service {
+		margin-top: calc(var(--spacing-base) * 4);
+		margin-bottom: calc(var(--spacing-base) * 3);
+		max-width: 360px;
+
+		a {
+			text-decoration: underline;
+		}
+	}
+
+	.jp-action-button {
+		margin-top: 40px;
+
+		&--button {
+			border-radius: 4px;
+			font-weight: 600;
+		}
+
+		button {
+			max-width: 100%;
+
+			&:disabled {
+				color: hsla( 0, 0%, 100%, 0.4 );
+			}
+
+			@media ( max-width: $break-medium ) {
+				max-width: none;
+				width: 100%;
+			}
+		}
+	}
+
+	&__footer {
+		margin-top: 32px;
+	}
+}

package/components/connect-screen/basic/visual.jsx

@@ -0,0 +1,109 @@
+import { ActionButton, getRedirectUrl, TermsOfService } from '@automattic/jetpack-components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ConnectScreenLayout from '../layout';
+import './style.scss';
+
+/**
+ * The Connection Screen Visual component..
+ *
+ * @param {object} props -- The properties.
+ * @returns {React.Component} The `ConnectScreenRequiredPlanVisual` component.
+ */
+const ConnectScreenVisual = props => {
+	const {
+		title,
+		images,
+		children,
+		assetBaseUrl,
+		isLoading,
+		buttonLabel,
+		handleButtonClick,
+		displayButtonError,
+		buttonIsLoading,
+		footer,
+		isOfflineMode,
+		logo,
+	} = props;
+
+	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 }
+			assetBaseUrl={ assetBaseUrl }
+			images={ images }
+			className={
+				'jp-connection__connect-screen' +
+				( isLoading ? ' jp-connection__connect-screen__loading' : '' )
+			}
+			logo={ logo }
+		>
+			<div className="jp-connection__connect-screen__content">
+				{ children }
+
+				<div className="jp-connection__connect-screen__tos">
+					<TermsOfService agreeButtonLabel={ buttonLabel } />
+				</div>
+				<ActionButton
+					label={ buttonLabel }
+					onClick={ handleButtonClick }
+					displayError={ displayButtonError || isOfflineMode }
+					errorMessage={ errorMessage }
+					isLoading={ buttonIsLoading }
+					isDisabled={ isOfflineMode }
+				/>
+
+				{ footer && <div className="jp-connection__connect-screen__footer">{ footer }</div> }
+			</div>
+		</ConnectScreenLayout>
+	);
+};
+
+ConnectScreenVisual.propTypes = {
+	/** The Title. */
+	title: PropTypes.string,
+	/** Images to display on the right side. */
+	images: PropTypes.arrayOf( PropTypes.string ),
+	/** The assets base URL. */
+	assetBaseUrl: PropTypes.string,
+	/** Whether the connection status is still loading. */
+	isLoading: PropTypes.bool,
+	/** Text label to be used into button. */
+	buttonLabel: PropTypes.string.isRequired,
+	/** Callback to be called on button click. */
+	handleButtonClick: PropTypes.func,
+	/** Whether the error message appears or not. */
+	displayButtonError: PropTypes.bool,
+	/** Whether the button is loading or not. */
+	buttonIsLoading: PropTypes.bool,
+	/** Node that will be rendered after ToS */
+	footer: PropTypes.node,
+	/** Whether the site is in offline mode. */
+	isOfflineMode: PropTypes.bool,
+	/** The logo to display at the top of the component. */
+	logo: PropTypes.element,
+};
+
+ConnectScreenVisual.defaultProps = {
+	isLoading: false,
+	buttonIsLoading: false,
+	displayButtonError: false,
+	handleButtonClick: () => {},
+	footer: null,
+	isOfflineMode: false,
+};
+
+export default ConnectScreenVisual;

package/components/connect-screen/layout/image-slider.jsx

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+/**
+ * The ImageSlider component.
+ *
+ * @param {object} props -- The properties.
+ * @param {Array} props.images -- Images to display on the right side.
+ * @param {string} props.assetBaseUrl -- The assets base URL
+ * @returns {React.Component} The `ImageSlider` component.
+ */
+const ImageSlider = props => {
+	const { images, assetBaseUrl } = props;
+
+	if ( ! images.length ) {
+		return null;
+	}
+
+	const imagesHTML = images.map( ( image, index ) => (
+		<React.Fragment key={ index }>
+			<img src={ assetBaseUrl + image } alt="" />
+		</React.Fragment>
+	) );
+
+	return <div className="jp-connection__connect-screen__image-slider">{ imagesHTML }</div>;
+};
+
+ImageSlider.propTypes = {
+	images: PropTypes.arrayOf( PropTypes.string ).isRequired,
+	assetBaseUrl: PropTypes.string,
+};
+
+ImageSlider.defaultProps = {
+	assetBaseUrl: '',
+};
+
+export default ImageSlider;

package/components/connect-screen/layout/index.jsx

@@ -0,0 +1,65 @@
+import { JetpackLogo } from '@automattic/jetpack-components';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImageSlider from './image-slider';
+import './style.scss';
+
+/**
+ * The Connection Screen Layout component.
+ *
+ * @param {object} props -- The properties.
+ * @returns {React.Component} The `ConnectScreenLayout` component.
+ */
+const ConnectScreenLayout = props => {
+	const { title, children, className, assetBaseUrl, images, logo, rna = false } = props;
+
+	const showImageSlider = images?.length;
+
+	return (
+		<div
+			className={ classNames(
+				'jp-connection__connect-screen-layout',
+				showImageSlider ? 'jp-connection__connect-screen-layout__two-columns' : '',
+				className ? ' ' + className : ''
+			) }
+		>
+			{ rna && (
+				<div className="jp-connection__connect-screen-layout__color-blobs">
+					<div className="jp-connection__connect-screen-layout__color-blobs__green"></div>
+					<div className="jp-connection__connect-screen-layout__color-blobs__yellow"></div>
+					<div className="jp-connection__connect-screen-layout__color-blobs__blue"></div>
+				</div>
+			) }
+
+			<div className="jp-connection__connect-screen-layout__left">
+				{ logo || <JetpackLogo /> }
+
+				<h2>{ title }</h2>
+
+				{ children }
+			</div>
+
+			{ showImageSlider ? (
+				<div className="jp-connection__connect-screen-layout__right">
+					<ImageSlider images={ images } assetBaseUrl={ assetBaseUrl } />
+				</div>
+			) : null }
+		</div>
+	);
+};
+
+ConnectScreenLayout.propTypes = {
+	/** The Title. */
+	title: PropTypes.string,
+	/** Class to be added to component. */
+	className: PropTypes.string,
+	/** Images to display on the right side. */
+	images: PropTypes.arrayOf( PropTypes.string ),
+	/** The assets base URL. */
+	assetBaseUrl: PropTypes.string,
+	/** The logo to display at the top of the component. */
+	logo: PropTypes.element,
+};
+
+export default ConnectScreenLayout;

package/components/connect-screen/layout/style.scss

@@ -0,0 +1,238 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+@import '@automattic/jetpack-base-styles/style';
+
+.jp-connection__connect-screen-layout {
+	background: var( --jp-white );
+	box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
+	border-radius: 4px;
+
+	&__loading {
+		display: none;
+	}
+
+	&__left, &__right {
+		box-sizing: border-box;
+	}
+
+	&__left {
+		padding: calc(var(--spacing-base) * 3);
+
+		@include break-small {
+			padding: 64px 96px;
+		}
+
+		.jetpack-logo {
+			margin-bottom: 24px;
+		}
+
+		h2 {
+			font-style: normal;
+			font-weight: bold;
+			font-size: 36px;
+			line-height: 40px;
+			color: var( --jp-black );
+			margin-top: 32px;
+			margin-bottom: 0;
+		}
+
+		h3 {
+			font-style: normal;
+			font-weight: 500;
+			font-size: 24px;
+			line-height: 32px;
+			color: var( --jp-black );
+			margin-top: 32px;
+			margin-bottom: 0;
+		}
+
+		p, li {
+			font-style: normal;
+			font-weight: normal;
+			font-size: 16px;
+			line-height: 24px;
+		}
+
+		p {
+			color: #101517;
+			margin: 16px 0;
+		}
+
+		a {
+			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;
+			}
+		}
+
+		ul {
+			list-style-type: none;
+			padding: 0;
+
+			li {
+				background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAANlBMVEVHcEwFnwUInggGnggGnggHnAcAnwUFnQcAnwcGnwkFnQgGnQgFnwcGnQYFnQcFnAcGnQkDnwdhiL0pAAAAEnRSTlMAMF//f2Aw7yBQ3+9gcIBgcED+HDbkAAAAZklEQVR4Ae3LNwICARDDQC0+cv7/Y8mwV9odSfWIcf/+VegnGkIvDaGXKvTTn/Gz+Uf5xTL0K1XotS7fs5H6GHvvaO8d7c3j7rdgHne/A/PYt/cO+R42oYdN6OEQetiFHo4A//6dAXqtBEkmtWutAAAAAElFTkSuQmCC) no-repeat;
+				background-size: 24px;
+				padding-left: 30px;
+				margin-bottom: 9px;
+				color: var( --jp-black );
+			}
+		}
+	}
+
+	&__right {
+		padding: 64px 0;
+
+		img {
+			max-width: 100%;
+		}
+	}
+
+	&__two-columns {
+		display: flex;
+    	flex-wrap: wrap;
+
+		.jp-connection__connect-screen-layout__left {
+			flex-grow: 1;
+			flex-basis: 100%;
+
+			@include break-xlarge {
+				flex-basis: 52%;
+			}
+		}
+
+		.jp-connection__connect-screen-layout__right {
+			flex-grow: 1;
+			flex-basis: 47%;
+			background: #F9F9F6;
+			display: none;
+
+			@include break-xlarge {
+				display: block;
+			}
+		}
+	}
+}
+
+.rna {
+	overflow: hidden;
+
+	.jp-connection__connect-screen-layout__left {
+		position: relative;
+		z-index: 2;
+
+		h2 {
+			margin-top: 0;
+			font-weight: 700;
+		}
+
+		h3 {
+			margin-top: 24px;
+		}
+
+		@include break-small {
+			padding: 4rem 6rem 4rem 4rem;
+		}
+	}
+	
+	.jp-connection__connect-screen-required-plan__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) * 9.25);
+			right: calc(var(--spacing-base) * -45);
+		}
+		
+		.jp-components__pricing-card {
+			border-radius: var(--jp-border-radius-rna);
+			width: 425px;
+			max-width: 100%;
+
+			&__title {
+				margin-top: 0.625rem;
+			}
+
+			@include break-large {
+				padding: 3rem;
+			}
+		}
+
+		.components-button {
+			margin-bottom: 0;
+		}
+	}
+
+	.jp-backup-dashboard-promotion {
+		ul.jp-product-promote li {
+			margin-bottom: 0.75rem;
+		}
+	}
+
+	.jp-connection__connect-screen-layout__color-blobs {
+		display: none;
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 363px;
+		height: 677px;
+		z-index: 1;
+
+		clip-path: polygon( 100% 0, 100% 100%, 0 0, 0 0 );
+
+		&__blue,
+		&__yellow,
+		&__green {
+			position: absolute;
+			filter: blur(50px);
+			border-radius: 50%;
+		}
+
+		&__blue {
+			width: 400px;
+			height: 400px;
+			right: -100px;
+			top: -275px;
+			z-index: 3;
+			
+			background-color: var(--jp-blue-5);
+		}
+
+		&__yellow {
+			width: 250px;
+			height: 250px;
+			right: -25px;
+			top: 10px;
+			z-index: 2;
+
+			background-color: var(--jp-yellow-5);
+		}
+
+		&__green {
+			width: 300px;
+			height: 300px;
+			right: 0;
+			top: 175px;
+			z-index: 1;
+
+			background-color: var(--jp-green-5);
+		}
+
+		@media ( min-width: 1080px ) {
+			display: initial;
+		}
+	}
+}