@automattic/jetpack-connection 0.29.8

package/components/manage-connection-dialog/style.scss

@@ -0,0 +1,106 @@
+@import '@automattic/jetpack-base-styles/style';
+
+.jp-connection__manage-dialog {
+	--spacing-base: 8px;
+	margin: auto;
+	width: 1200px;
+	border-radius: 3px;
+
+	&__content{
+		background: var( --jp-white-off );
+		padding: 80px;
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		h1 {
+			margin: 0;
+			font-size: var( --font-title-large );
+			font-weight: bold;
+			line-height: 1.2;
+		}
+	}
+
+	&__large-text {
+		margin-top: calc( var( --spacing-base ) * 3 );
+		margin-bottom: calc( var( --spacing-base ) * 4 );
+		max-width: 60%;
+		font-weight: 600;
+		font-size: 1.25rem;
+	}
+
+	&__actions{
+		background: var( --jp-white );
+		margin:0px !important;
+		border-top: 1px solid var( --jp-gray );
+		max-width: 1200px !important;
+		padding: calc( var( --spacing-base ) * 4 ) calc( var( --spacing-base ) * 5 );
+		align-items:center;
+		position: sticky;
+		bottom: 0;
+		box-sizing: border-box;
+	}
+
+	&__link {
+		color: var( --jp-black );
+
+		&:hover {
+			color: var( --jp-black );
+			text-decoration-thickness: var( --jp-underline-thickness );
+		}
+
+		&:focus {
+			color: var( --jp-black );
+		}
+	}
+
+	&__button-wrap button{
+		float:right;
+	}
+
+	&__action-card {
+		background-color: var( --jp-white );
+		width: 750px;
+		max-width: 100%;
+		padding: 1rem 2rem;
+		border-radius: 3px;
+		box-shadow: 0 0 15px var( --jp-gray-off );
+		margin: var( --spacing-base ) auto;
+		text-align: left;
+		border: none;
+
+		&__card-headline {
+			font-size: var( --font-body );
+			font-weight: 600;
+			text-decoration: none;
+			line-height: calc( var(--spacing-base) * 3 );
+		}
+
+		&__icon {
+			float:right;
+		}
+
+		.transfer {
+			color:var( --jp-black );
+			fill: var( --jp-black );
+		}
+
+		.disconnect {
+			color: var( --jp-red );
+			fill: var( --jp-red );
+		}
+	}
+
+	.components-modal {
+		&__header {
+			display: none;
+		}
+
+		&__content {
+			margin: 0;
+			padding:0;
+		}
+	}
+}

package/components/use-connection/index.jsx

@@ -0,0 +1,112 @@
+import restApi from '@automattic/jetpack-api';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from 'react';
+import { STORE_ID } from '../../state/store';
+
+const initialState = window?.JP_CONNECTION_INITIAL_STATE ? window.JP_CONNECTION_INITIAL_STATE : {};
+
+export default ( {
+	registrationNonce = initialState.registrationNonce,
+	apiRoot = initialState.apiRoot,
+	apiNonce = initialState.apiNonce,
+	redirectUri,
+	autoTrigger,
+	from,
+	skipUserConnection,
+} = {} ) => {
+	const { registerSite, connectUser, refreshConnectedPlugins } = useDispatch( STORE_ID );
+
+	const registrationError = useSelect( select => select( STORE_ID ).getRegistrationError() );
+	const {
+		siteIsRegistering,
+		userIsConnecting,
+		userConnectionData,
+		connectedPlugins,
+		connectionErrors,
+		isRegistered,
+		isUserConnected,
+		hasConnectedOwner,
+		isOfflineMode,
+	} = useSelect( select => ( {
+		siteIsRegistering: select( STORE_ID ).getSiteIsRegistering(),
+		userIsConnecting: select( STORE_ID ).getUserIsConnecting(),
+		userConnectionData: select( STORE_ID ).getUserConnectionData(),
+		connectedPlugins: select( STORE_ID ).getConnectedPlugins(),
+		connectionErrors: select( STORE_ID ).getConnectionErrors(),
+		isOfflineMode: select( STORE_ID ).getIsOfflineMode(),
+		...select( STORE_ID ).getConnectionStatus(),
+	} ) );
+
+	/**
+	 * User register process handler.
+	 *
+	 * @returns {Promise} - Promise which resolves when the product status is activated.
+	 */
+	const handleConnectUser = () => {
+		if ( ! skipUserConnection ) {
+			return connectUser( { from, redirectUri } );
+		} else if ( redirectUri ) {
+			window.location = redirectUri;
+			return Promise.resolve( redirectUri );
+		}
+
+		return Promise.resolve();
+	};
+
+	/**
+	 * Site register process handler.
+	 *
+	 * It handles the process to register the site,
+	 * considering also the user registration status.
+	 * When they are registered, it will try to only register the site.
+	 * Otherwise, will try to register the user right after
+	 * the site was successfully registered.
+	 *
+	 * @param {Event} [e] - Event that dispatched handleRegisterSite
+	 * @returns {Promise}   Promise when running the registration process. Otherwise, nothing.
+	 */
+	const handleRegisterSite = e => {
+		e && e.preventDefault();
+
+		if ( isRegistered ) {
+			return handleConnectUser();
+		}
+
+		return registerSite( { registrationNonce, redirectUri } ).then( () => {
+			return handleConnectUser();
+		} );
+	};
+
+	/**
+	 * Initialize/Setup the REST API.
+	 */
+	useEffect( () => {
+		restApi.setApiRoot( apiRoot );
+		restApi.setApiNonce( apiNonce );
+	}, [ apiRoot, apiNonce ] );
+
+	/**
+	 * Auto-trigger the flow, only do it once.
+	 */
+	useEffect( () => {
+		if ( autoTrigger && ! siteIsRegistering && ! userIsConnecting ) {
+			handleRegisterSite();
+		}
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
+
+	return {
+		handleRegisterSite,
+		handleConnectUser,
+		refreshConnectedPlugins,
+		isRegistered,
+		isUserConnected,
+		siteIsRegistering,
+		userIsConnecting,
+		registrationError,
+		userConnectionData,
+		hasConnectedOwner,
+		connectedPlugins,
+		connectionErrors,
+		isOfflineMode,
+	};
+};

package/helpers/third-party-cookies-fallback.jsx

@@ -0,0 +1,10 @@
+/**
+ * Performs the fallback redirect if third-party cookies are not available.
+ *
+ * @param {string} fallbackURL -- The fallback URL.
+ */
+const thirdPartyCookiesFallback = fallbackURL => {
+	window.location.replace( fallbackURL );
+};
+
+export default thirdPartyCookiesFallback;

package/hooks/use-connection-error-notice/index.jsx

@@ -0,0 +1,38 @@
+import ConnectionErrorNotice from '../../components/connection-error-notice';
+import useConnection from '../../components/use-connection';
+import useRestoreConnection from '../../hooks/use-restore-connection/index.jsx';
+
+/**
+ * Connection error notice hook.
+ * Returns a ConnectionErrorNotice component and the conditional flag on whether
+ * to render the component or not.
+ *
+ * @returns {object} - The hook data.
+ */
+export default function useConnectionErrorNotice() {
+	const { connectionErrors } = useConnection( {} );
+	const connectionErrorList = Object.values( connectionErrors ).shift();
+	const connectionErrorMessage =
+		connectionErrorList &&
+		Object.values( connectionErrorList ).length &&
+		Object.values( connectionErrorList ).shift().error_message;
+
+	const hasConnectionError = Boolean( connectionErrorMessage );
+
+	return { hasConnectionError, connectionErrorMessage };
+}
+
+export const ConnectionError = () => {
+	const { hasConnectionError, connectionErrorMessage } = useConnectionErrorNotice();
+	const { restoreConnection, isRestoringConnection, restoreConnectionError } =
+		useRestoreConnection();
+
+	return hasConnectionError ? (
+		<ConnectionErrorNotice
+			isRestoringConnection={ isRestoringConnection }
+			restoreConnectionError={ restoreConnectionError }
+			restoreConnectionCallback={ restoreConnection }
+			message={ connectionErrorMessage }
+		/>
+	) : null;
+};

package/hooks/use-product-checkout-workflow/Readme.md

@@ -0,0 +1,61 @@
+# useProductCheckoutWorkflow
+
+Custom hook that performs the needed steps to concrete the checkout workflow.
+For this, it'll try to regiter the site in case it's disconnected, and then it'll redirect to the Calypso checkout page.
+The hook delegates the task to connect the user when it's disconnected, adding a `unlinked=1` to the checkout URL.
+
+## API
+
+### Arguments
+The hook expects a `props` object argument with the following specs:
+
+#### productSlug
+this is the WordPress.com product slug.
+#### redirectUrl
+The URL to redirect to after checkout.
+For instance, for security bundle it's usually defined with `jetpack_security_t1_yearly`.
+#### siteSuffix (optional)
+Site slug suffix to be used as part of Calypso URLs. As default, tt's defined by the [get_site_suffix()](../../../../packages/status/src/class-status.php#L327) backend helper.
+
+And it returns also an object with the following keys:
+
+#### run
+helper function to run the checkout process. Usually, you'd like to asign this function as to an event callback.
+
+```jsx
+import { useProductCheckoutWorkflow } from '@automattic/jetpack-connection';
+
+function MyComponent() {
+	const { run } = useProductCheckoutWorkflow( {
+		productSlug: 'jetpack_security_t1_yearly',
+		siteSuffix: 'poweredsite.wordpress.com'
+		redirectUrl: 'https://poweredsite.wordpress.com/wp-admin/admin.php?page=jetpack-protect',
+	} );
+
+	return (
+		<Button onClick={ run }>Add Security plan!</Button>
+	)
+}
+```
+
+#### isRegisterd
+determine if the site is registered, or not. It's shortcut to the [getSiteIsRegistering](../../state/selectors.jsx#L10) selector.
+
+#### hasCheckoutStarted*
+True right after the checkout process starts. Take advantage of this prop to deal with the delay that happens when the browser starts to redirect to the checkout page.
+
+```jsx
+import { useProductCheckoutWorkflow } from '@automattic/jetpack-connection';
+
+function MyComponent() {
+	const { run, hasCheckoutStarted } = useProductCheckoutWorkflow( { ... } );
+
+	if ( hasCheckoutStarted ) {
+		return <div>Going to checkout page.</div>;
+	}
+
+	return (
+		<Button onClick={ run }>Add Security plan!</Button>
+	)
+}
+```

package/hooks/use-product-checkout-workflow/index.jsx

@@ -0,0 +1,103 @@
+import restApi from '@automattic/jetpack-api';
+import { getProductCheckoutUrl } from '@automattic/jetpack-components';
+import { useDispatch } from '@wordpress/data';
+import debugFactory from 'debug';
+import { useEffect, useState } from 'react';
+import useConnection from '../../components/use-connection';
+import { STORE_ID } from '../../state/store.jsx';
+
+const debug = debugFactory( 'jetpack:connection:useProductCheckoutWorkflow' );
+
+const {
+	registrationNonce,
+	apiRoot,
+	apiNonce,
+	siteSuffix: defaultSiteSuffix,
+} = window?.JP_CONNECTION_INITIAL_STATE ? window.JP_CONNECTION_INITIAL_STATE : {};
+
+/**
+ * Custom hook that performs the needed steps
+ * to concrete the checkout workflow.
+ *
+ * @param {object} props              - The props passed to the hook.
+ * @param {string} props.productSlug  - The WordPress product slug.
+ * @param {string} props.redirectUrl  - The URI to redirect to after checkout.
+ * @param {string} [props.siteSuffix] - The site suffix.
+ * @param {Function} props.siteProductAvailabilityHandler - The function used to check whether the site already has the requested product. This will be checked after registration and the checkout page will be skipped if the promise returned resloves true.
+ * @param {Function} props.from       - The plugin slug initiated the flow.
+ * @returns {Function}				  - The useEffect hook.
+ */
+export default function useProductCheckoutWorkflow( {
+	productSlug,
+	redirectUrl,
+	siteSuffix = defaultSiteSuffix,
+	siteProductAvailabilityHandler = null,
+	from,
+} = {} ) {
+	debug( 'productSlug is %s', productSlug );
+	debug( 'redirectUrl is %s', redirectUrl );
+	debug( 'siteSuffix is %s', siteSuffix );
+	debug( 'from is %s', from );
+	const [ hasCheckoutStarted, setCheckoutStarted ] = useState( false );
+	const { registerSite } = useDispatch( STORE_ID );
+
+	const { isUserConnected, isRegistered, handleConnectUser } = useConnection( {
+		redirectUri: redirectUrl,
+		from,
+	} );
+
+	// Build the checkout URL.
+	const checkoutProductUrl = getProductCheckoutUrl(
+		productSlug,
+		siteSuffix,
+		redirectUrl,
+		isUserConnected
+	);
+	debug( 'checkoutProductUrl is %s', checkoutProductUrl );
+	debug( 'isUserConnected is %s', isUserConnected );
+
+	const handleAfterRegistration = () => {
+		return Promise.resolve(
+			siteProductAvailabilityHandler && siteProductAvailabilityHandler()
+		).then( siteHasWpcomProduct => {
+			if ( siteHasWpcomProduct ) {
+				debug( 'handleAfterRegistration: Site has a product associated' );
+				return handleConnectUser();
+			}
+			debug(
+				'handleAfterRegistration: Site does not have a product associated. Redirecting to checkout %s',
+				checkoutProductUrl
+			);
+			window.location.href = checkoutProductUrl;
+		} );
+	};
+
+	/**
+	 * Handler to run the checkout workflow.
+	 *
+	 * @param {Event} [event] - Event that dispatched run
+	 * @returns {void}          Nothing.
+	 */
+	const run = event => {
+		event && event.preventDefault();
+		setCheckoutStarted( true );
+
+		if ( isRegistered ) {
+			return handleAfterRegistration();
+		}
+
+		registerSite( { registrationNonce, redirectUri: redirectUrl } ).then( handleAfterRegistration );
+	};
+
+	// Initialize/Setup the REST API.
+	useEffect( () => {
+		restApi.setApiRoot( apiRoot );
+		restApi.setApiNonce( apiNonce );
+	}, [] );
+
+	return {
+		run,
+		isRegistered,
+		hasCheckoutStarted,
+	};
+}

package/hooks/use-restore-connection/index.jsx

@@ -0,0 +1,64 @@
+import restApi from '@automattic/jetpack-api';
+import { useDispatch } from '@wordpress/data';
+import { useEffect, useState } from 'react';
+import { STORE_ID } from '../../state/store';
+
+const { apiRoot, apiNonce } = window?.JP_CONNECTION_INITIAL_STATE
+	? window.JP_CONNECTION_INITIAL_STATE
+	: {};
+
+/**
+ * Restore connection hook.
+ * It will initiate an API request attempting to restore the connection, or reconnect if it cannot be restored.
+ *
+ * @returns {object} - The hook data.
+ */
+export default function useRestoreConnection() {
+	const [ isRestoringConnection, setIsRestoringConnection ] = useState( false );
+	const [ restoreConnectionError, setRestoreConnectionError ] = useState( null );
+
+	const { disconnectUserSuccess, setConnectionErrors } = useDispatch( STORE_ID );
+
+	const USER_CONNECTION_URL = '/wp-admin/admin.php?page=my-jetpack#/connection';
+
+	/**
+	 * Initiate connection restore.
+	 *
+	 * @param {boolean} autoReconnectUser - If user connection needs to be reestablished, automatically initiate the flow.
+	 * @returns {Promise<object>} - The API request promise.
+	 */
+	const restoreConnection = ( autoReconnectUser = true ) => {
+		setIsRestoringConnection( true );
+		setRestoreConnectionError( null );
+
+		return restApi
+			.reconnect()
+			.then( connectionStatusData => {
+				// status 'in_progress' means the user needs to re-connect their WP.com account.
+				if ( 'in_progress' === connectionStatusData.status ) {
+					disconnectUserSuccess();
+					setConnectionErrors( {} );
+					if ( autoReconnectUser ) {
+						window.location.href = USER_CONNECTION_URL;
+					}
+				} else {
+					window.location.reload();
+				}
+
+				return connectionStatusData;
+			} )
+			.catch( error => {
+				setRestoreConnectionError( error );
+				setIsRestoringConnection( false );
+
+				throw error;
+			} );
+	};
+
+	useEffect( () => {
+		restApi.setApiRoot( apiRoot );
+		restApi.setApiNonce( apiNonce );
+	}, [] );
+
+	return { restoreConnection, isRestoringConnection, restoreConnectionError };
+}

package/index.jsx

@@ -0,0 +1,48 @@
+/*
+This program is free software; you can redistribute it and/or
+modify it under the terms of the GNU General Public License
+as published by the Free Software Foundation; either version 2
+of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program; if not, write to the Free Software
+Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+/**
+ * Components.
+ */
+export { default as ConnectScreen } from './components/connect-screen/basic';
+export { default as ConnectScreenLayout } from './components/connect-screen/layout';
+export { default as ConnectScreenRequiredPlan } from './components/connect-screen/required-plan';
+export { default as ConnectButton } from './components/connect-button';
+export { default as InPlaceConnection } from './components/in-place-connection';
+export { default as ConnectUser } from './components/connect-user';
+export { default as ConnectionErrorNotice } from './components/connection-error-notice';
+export { ConnectionError } from './hooks/use-connection-error-notice';
+export { default as DisconnectDialog } from './components/disconnect-dialog';
+export { default as DisconnectCard } from './components/disconnect-card';
+export { default as useConnection } from './components/use-connection';
+export { default as ManageConnectionDialog } from './components/manage-connection-dialog';
+
+/**
+ * Helpers.
+ */
+export { default as thirdPartyCookiesFallbackHelper } from './helpers/third-party-cookies-fallback';
+
+/**
+ * Store
+ */
+export { STORE_ID as CONNECTION_STORE_ID } from './state/store';
+
+/**
+ * Hooks
+ */
+export { default as useProductCheckoutWorkflow } from './hooks/use-product-checkout-workflow';
+export { default as useRestoreConnection } from './hooks/use-restore-connection';
+export { default as useConnectionErrorNotice } from './hooks/use-connection-error-notice';

package/index.native.js

@@ -0,0 +1 @@
+export { default as useConnection } from './components/use-connection';

package/package.json

@@ -0,0 +1,62 @@
+{
+	"name": "@automattic/jetpack-connection",
+	"version": "0.29.8",
+	"description": "Jetpack Connection Component",
+	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
+	"bugs": {
+		"url": "https://github.com/Automattic/jetpack/labels/[JS Package] Connection"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Automattic/jetpack.git",
+		"directory": "projects/js-packages/connection"
+	},
+	"author": "Automattic",
+	"license": "GPL-2.0-or-later",
+	"dependencies": {
+		"@automattic/jetpack-analytics": "^0.1.26",
+		"@automattic/jetpack-api": "^0.16.1",
+		"@automattic/jetpack-components": "^0.41.1",
+		"@automattic/jetpack-config": "^0.1.21",
+		"@wordpress/base-styles": "4.29.0",
+		"@wordpress/browserslist-config": "5.21.0",
+		"@wordpress/components": "25.4.0",
+		"@wordpress/data": "9.8.0",
+		"@wordpress/element": "5.15.0",
+		"@wordpress/i18n": "4.38.0",
+		"@wordpress/icons": "9.29.0",
+		"classnames": "2.3.2",
+		"debug": "4.3.4",
+		"prop-types": "^15.7.2"
+	},
+	"devDependencies": {
+		"@automattic/jetpack-base-styles": "^0.6.5",
+		"@babel/core": "7.22.9",
+		"@babel/preset-react": "7.22.5",
+		"@storybook/addon-actions": "7.1.0",
+		"@testing-library/dom": "8.19.1",
+		"@testing-library/react": "13.4.0",
+		"@testing-library/user-event": "14.4.3",
+		"jest": "29.4.3",
+		"jest-environment-jsdom": "29.4.3",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"react-test-renderer": "18.2.0"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
+	},
+	"type": "module",
+	"exports": {
+		".": "./index.jsx"
+	},
+	"sideEffects": [
+		"./state/store.jsx",
+		"*.css",
+		"*.scss"
+	],
+	"scripts": {
+		"test": "NODE_OPTIONS=--experimental-vm-modules jest"
+	}
+}