@automattic/jetpack-connection 0.33.3 → 0.33.4

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
 
+## [0.33.4] - 2024-03-25
+### Fixed
+- Fix some redirect after purchase behavior when site is not connected [#36448]
+
 ## [0.33.3] - 2024-03-12
 ### Changed
 - Updated package dependencies. [#36325]
@@ -730,6 +734,7 @@
 - `Main` and `ConnectUser` components added.
 - `JetpackRestApiClient` API client added.
 
+[0.33.4]: https://github.com/Automattic/jetpack-connection-js/compare/v0.33.3...v0.33.4
 [0.33.3]: https://github.com/Automattic/jetpack-connection-js/compare/v0.33.2...v0.33.3
 [0.33.2]: https://github.com/Automattic/jetpack-connection-js/compare/v0.33.1...v0.33.2
 [0.33.1]: https://github.com/Automattic/jetpack-connection-js/compare/v0.33.0...v0.33.1

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

@@ -0,0 +1,101 @@
+import { __ } from '@wordpress/i18n';
+import React from 'react';
+import useConnection from '../../use-connection';
+import ConnectScreenVisual from './visual';
+
+export type Props = {
+	// API root
+	apiRoot: string;
+	// API nonce
+	apiNonce: string;
+	// Registration nonce
+	registrationNonce: string;
+	// The redirect admin UR
+	redirectUri: string;
+	// Additional page elements to show before the call to action
+	children: React.ReactNode;
+	// The Title
+	title?: string;
+	// The Connect Button label
+	buttonLabel?: string;
+	// The text read by screen readers when connecting
+	loadingLabel?: string;
+	// Where the connection request is coming from
+	from?: string;
+	// Whether to initiate the connection process automatically upon rendering the component
+	autoTrigger?: boolean;
+	// Images to display on the right side
+	images?: string[];
+	// The assets base URL
+	assetBaseUrl?: string;
+	// Whether to not require a user connection and just redirect after site connection
+	skipUserConnection?: boolean;
+	// Additional page elements to show after the call to action
+	footer?: React.ReactNode;
+	// The logo to display at the top of the component
+	logo?: React.ReactNode;
+};
+
+/*
+ * The Connection Screen component.
+ */
+const ConnectScreen: React.FC< Props > = ( {
+	title,
+	buttonLabel,
+	loadingLabel,
+	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;
+	const errorCode = registrationError?.response?.code;
+
+	return (
+		<ConnectScreenVisual
+			title={
+				title || __( 'Over 5 million WordPress sites are faster and more secure', 'jetpack' )
+			}
+			images={ images || [] }
+			assetBaseUrl={ assetBaseUrl }
+			buttonLabel={ buttonLabel || __( 'Set up Jetpack', 'jetpack' ) }
+			loadingLabel={ loadingLabel }
+			handleButtonClick={ handleRegisterSite }
+			displayButtonError={ displayButtonError }
+			errorCode={ errorCode }
+			buttonIsLoading={ buttonIsLoading }
+			footer={ footer }
+			isOfflineMode={ isOfflineMode }
+			logo={ logo }
+		>
+			{ children }
+		</ConnectScreenVisual>
+	);
+};
+
+export default ConnectScreen;

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

@@ -0,0 +1,118 @@
+import { ActionButton, TermsOfService } from '@automattic/jetpack-components';
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import React from 'react';
+import ConnectScreenLayout from '../layout';
+import type { Props as ConnectScreenProps } from '../basic';
+import type { WithRequired } from '../types';
+import './style.scss';
+
+type SharedProps = Pick<
+	ConnectScreenProps,
+	| 'title'
+	| 'children'
+	| 'assetBaseUrl'
+	| 'images'
+	| 'logo'
+	| 'footer'
+	| 'buttonLabel'
+	| 'loadingLabel'
+>;
+type OwnProps = {
+	// Whether the connection status is still loading
+	isLoading?: boolean;
+	// Callback to be called on button click
+	handleButtonClick?: ( e: MouseEvent ) => void;
+	// Whether the error message appears or not
+	displayButtonError?: boolean;
+	// The connection error code
+	errorCode?: string;
+	// Whether the button is loading or not
+	buttonIsLoading?: boolean;
+	// Whether the site is in offline mode
+	isOfflineMode?: boolean;
+};
+
+export type Props = WithRequired< SharedProps, 'buttonLabel' > & OwnProps;
+
+const getErrorMessage = ( errorCode, isOfflineMode ) => {
+	// Explicit error code takes precedence over the offline mode.
+	switch ( errorCode ) {
+		case 'fail_domain_forbidden':
+		case 'fail_ip_forbidden':
+		case 'fail_domain_tld':
+		case 'fail_subdomain_wpcom':
+		case 'siteurl_private_ip':
+			return __(
+				'Your site host is on a private network. Jetpack can only connect to public sites.',
+				'jetpack'
+			);
+	}
+
+	if ( isOfflineMode ) {
+		return createInterpolateElement( __( 'Unavailable in <a>Offline Mode</a>', 'jetpack' ), {
+			a: (
+				<a
+					href={ getRedirectUrl( 'jetpack-support-development-mode' ) }
+					target="_blank"
+					rel="noopener noreferrer"
+				/>
+			),
+		} );
+	}
+};
+
+/*
+ * The Connection Screen Visual component.
+ */
+const ConnectScreenVisual: React.FC< Props > = ( {
+	title,
+	images,
+	children,
+	assetBaseUrl,
+	isLoading,
+	buttonLabel,
+	handleButtonClick,
+	displayButtonError,
+	errorCode,
+	buttonIsLoading,
+	loadingLabel,
+	footer,
+	isOfflineMode,
+	logo,
+} ) => (
+	<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={ getErrorMessage( errorCode, isOfflineMode ) }
+				isLoading={ buttonIsLoading }
+				isDisabled={ isOfflineMode }
+			/>
+			<span className="jp-connection__connect-screen__loading-message" role="status">
+				{ buttonIsLoading ? loadingLabel || __( 'Loading', 'jetpack' ) : '' }
+			</span>
+
+			{ footer && <div className="jp-connection__connect-screen__footer">{ footer }</div> }
+		</div>
+	</ConnectScreenLayout>
+);
+
+export default ConnectScreenVisual;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { Props as ConnectScreenProps } from '../basic';
+
+export type Props = Pick< ConnectScreenProps, 'images' | 'assetBaseUrl' >;
+
+/*
+ * The ImageSlider component.
+ */
+const ImageSlider: React.FC< Props > = ( { images, assetBaseUrl = '' } ) => {
+	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>;
+};
+
+export default ImageSlider;

package/components/connect-screen/layout/{index.jsx → index.tsx}

@@ -1,19 +1,36 @@
 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 type { Props as ConnectScreenProps } from '../basic';
+import type { WithRequired } from '../types';
 import './style.scss';
 
-/**
+type SharedProps = Pick<
+	ConnectScreenProps,
+	'title' | 'children' | 'assetBaseUrl' | 'images' | 'logo'
+>;
+type OwnProps = {
+	// Class to be added to component
+	className?: string;
+	// Whether to apply RNA styles
+	rna?: boolean;
+};
+
+export type Props = WithRequired< SharedProps, 'title' > & OwnProps;
+
+/*
  * 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 ConnectScreenLayout: React.FC< Props > = ( {
+	title,
+	children,
+	className,
+	assetBaseUrl,
+	images,
+	logo,
+	rna = false,
+} ) => {
 	const showImageSlider = images?.length;
 
 	return (
@@ -49,17 +66,4 @@ const ConnectScreenLayout = props => {
 	);
 };
 
-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/types/index.ts

@@ -0,0 +1 @@
+export type WithRequired< T, K extends keyof T > = T & { [ P in K ]-?: T[ P ] };

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

@@ -168,7 +168,9 @@ export default function useProductCheckoutWorkflow( {
 			return handleAfterRegistration( redirect );
 		}
 
-		registerSite( { registrationNonce, redirectUri: redirectUrl } ).then( handleAfterRegistration );
+		registerSite( { registrationNonce, redirectUri: redirectUrl } ).then( () =>
+			handleAfterRegistration( redirect )
+		);
 	};
 
 	// Initialize/Setup the REST API.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "0.33.3",
+	"version": "0.33.4",
 	"description": "Jetpack Connection Component",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
 	"bugs": {
@@ -16,7 +16,7 @@
 	"dependencies": {
 		"@automattic/jetpack-analytics": "^0.1.29",
 		"@automattic/jetpack-api": "^0.17.2",
-		"@automattic/jetpack-components": "^0.50.1",
+		"@automattic/jetpack-components": "^0.50.3",
 		"@automattic/jetpack-config": "^0.1.24",
 		"@wordpress/base-styles": "4.44.0",
 		"@wordpress/browserslist-config": "5.36.0",
@@ -37,6 +37,7 @@
 		"@testing-library/dom": "9.3.4",
 		"@testing-library/react": "14.2.1",
 		"@testing-library/user-event": "14.5.2",
+		"@types/react": "18.2.67",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"react": "18.2.0",

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

@@ -1,110 +0,0 @@
-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.loadingLabel -- The text read by screen readers when connecting.
- * @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,
-	loadingLabel,
-	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;
-	const errorCode = registrationError?.response?.code;
-
-	return (
-		<ConnectScreenVisual
-			title={ title }
-			images={ images }
-			assetBaseUrl={ assetBaseUrl }
-			buttonLabel={ buttonLabel }
-			loadingLabel={ loadingLabel }
-			handleButtonClick={ handleRegisterSite }
-			displayButtonError={ displayButtonError }
-			errorCode={ errorCode }
-			buttonIsLoading={ buttonIsLoading }
-			footer={ footer }
-			isOfflineMode={ isOfflineMode }
-			logo={ logo }
-		>
-			{ children }
-		</ConnectScreenVisual>
-	);
-};
-
-ConnectScreen.propTypes = {
-	title: PropTypes.string,
-	buttonLabel: PropTypes.string,
-	loadingLabel: 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/visual.jsx

@@ -1,137 +0,0 @@
-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,
-		errorCode,
-		buttonIsLoading,
-		loadingLabel,
-		footer,
-		isOfflineMode,
-		logo,
-	} = props;
-
-	const getErrorMessage = () => {
-		// Explicit error code takes precedence over the offline mode.
-		switch ( errorCode ) {
-			case 'fail_domain_forbidden':
-			case 'fail_ip_forbidden':
-			case 'fail_domain_tld':
-			case 'fail_subdomain_wpcom':
-			case 'siteurl_private_ip':
-				return __(
-					'Your site host is on a private network. Jetpack can only connect to public sites.',
-					'jetpack'
-				);
-		}
-
-		if ( isOfflineMode ) {
-			return createInterpolateElement( __( 'Unavailable in <a>Offline Mode</a>', 'jetpack' ), {
-				a: (
-					<a
-						href={ getRedirectUrl( 'jetpack-support-development-mode' ) }
-						target="_blank"
-						rel="noopener noreferrer"
-					/>
-				),
-			} );
-		}
-	};
-
-	const errorMessage = getErrorMessage( errorCode, isOfflineMode );
-
-	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 }
-				/>
-				<span className="jp-connection__connect-screen__loading-message" role="status">
-					{ buttonIsLoading ? loadingLabel : '' }
-				</span>
-
-				{ 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,
-	/** The connection error code. */
-	errorCode: PropTypes.string,
-	/** Whether the button is loading or not. */
-	buttonIsLoading: PropTypes.bool,
-	/** Text read by screen readers after the button is activated */
-	loadingLabel: PropTypes.string,
-	/** 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,
-	loadingLabel: __( 'Loading', 'jetpack' ),
-	displayButtonError: false,
-	errorCode: null,
-	handleButtonClick: () => {},
-	footer: null,
-	isOfflineMode: false,
-};
-
-export default ConnectScreenVisual;

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

@@ -1,37 +0,0 @@
-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;