@automattic/jetpack-connection 0.39.18 → 1.1.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
 
+## [1.1.0] - 2025-06-04
+### Added
+- Improve error handling for protected owner on WordPress.com. [#43593]
+
+## [1.0.0] - 2025-06-03
+### Changed
+- Update package dependencies. [#43718] [#43734]
+
 ## [0.39.18] - 2025-06-02
 ### Changed
 - sass: `@use` rather than `@import` for `@wordpress/base-styles`. [#43607]
@@ -1040,6 +1048,8 @@
 - `Main` and `ConnectUser` components added.
 - `JetpackRestApiClient` API client added.
 
+[1.1.0]: https://github.com/Automattic/jetpack-connection-js/compare/v1.0.0...v1.1.0
+[1.0.0]: https://github.com/Automattic/jetpack-connection-js/compare/v0.39.18...v1.0.0
 [0.39.18]: https://github.com/Automattic/jetpack-connection-js/compare/v0.39.17...v0.39.18
 [0.39.17]: https://github.com/Automattic/jetpack-connection-js/compare/v0.39.16...v0.39.17
 [0.39.16]: https://github.com/Automattic/jetpack-connection-js/compare/v0.39.15...v0.39.16

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

@@ -12,8 +12,13 @@ import styles from './styles.module.scss';
  * @return {React.Component} The `ConnectionErrorNotice` component.
  */
 const ConnectionErrorNotice = props => {
-	const { message, isRestoringConnection, restoreConnectionCallback, restoreConnectionError } =
-		props;
+	const {
+		message,
+		isRestoringConnection,
+		restoreConnectionCallback,
+		restoreConnectionError,
+		actions = [], // New prop for custom actions
+	} = props;
 
 	const [ isBiggerThanMedium ] = useBreakpointMatch( [ 'md' ], [ '>' ] );
 	const wrapperClassName =
@@ -73,6 +78,39 @@ const ConnectionErrorNotice = props => {
 		</Notice>
 	) : null;
 
+	// Determine which actions to show
+	let actionButtons = [];
+
+	if ( actions.length > 0 ) {
+		// Use custom actions
+		actionButtons = actions.map( ( action, index ) => (
+			<a
+				key={ index }
+				onClick={ action.onClick }
+				onKeyDown={ action.onClick }
+				className={ `${ styles.button } ${ action.variant === 'primary' ? styles.primary : '' }` }
+				href="#"
+			>
+				{ action.isLoading
+					? action.loadingText || __( 'Loading…', 'jetpack-connection-js' )
+					: action.label }
+			</a>
+		) );
+	} else if ( restoreConnectionCallback ) {
+		// Use default restore connection action for backward compatibility
+		actionButtons = [
+			<a
+				key="restore"
+				onClick={ restoreConnectionCallback }
+				onKeyDown={ restoreConnectionCallback }
+				className={ styles.button }
+				href="#"
+			>
+				{ __( 'Restore Connection', 'jetpack-connection-js' ) }
+			</a>,
+		];
+	}
+
 	return (
 		<>
 			{ errorRender }
@@ -81,16 +119,7 @@ const ConnectionErrorNotice = props => {
 					{ icon }
 					{ message }
 				</div>
-				{ restoreConnectionCallback && (
-					<a
-						onClick={ restoreConnectionCallback }
-						onKeyDown={ restoreConnectionCallback }
-						className={ styles.button }
-						href="#"
-					>
-						{ __( 'Restore Connection', 'jetpack-connection-js' ) }
-					</a>
-				) }
+				{ actionButtons.length > 0 && <div className={ styles.actions }>{ actionButtons }</div> }
 			</Notice>
 		</>
 	);
@@ -98,13 +127,23 @@ const ConnectionErrorNotice = props => {
 
 ConnectionErrorNotice.propTypes = {
 	/** The notice message. */
-	message: PropTypes.string.isRequired,
+	message: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ).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,
+	/** Array of custom action objects. */
+	actions: PropTypes.arrayOf(
+		PropTypes.shape( {
+			label: PropTypes.string.isRequired,
+			onClick: PropTypes.func.isRequired,
+			isLoading: PropTypes.bool,
+			loadingText: PropTypes.string,
+			variant: PropTypes.oneOf( [ 'primary', 'secondary' ] ),
+		} )
+	),
 };
 
 export default ConnectionErrorNotice;

package/components/connection-error-notice/styles.module.scss

@@ -55,6 +55,16 @@
 		margin-top: 24px;
 		background: #000;
 		border-radius: var( --jp-border-radius );
+
+		&.primary {
+			background: var( --jp-green-50 );
+		}
+	}
+
+	.actions {
+		display: flex;
+		gap: calc( var( --spacing-base ) * 2 ); // 16px
+		flex-wrap: wrap;
 	}
 
 	&.bigger-than-medium {

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

@@ -1,10 +1,39 @@
+import { __ } from '@wordpress/i18n';
 import ConnectionErrorNotice from '../../components/connection-error-notice';
 import useConnection from '../../components/use-connection';
 import useRestoreConnection from '../../hooks/use-restore-connection/index.jsx';
 
+/**
+ * Helper function to generate user creation URL with email prepopulation
+ *
+ * @param {object} connectionError - The connection error object
+ * @param {string} baseUrl         - Base admin URL (defaults to '/wp-admin/')
+ * @return {string} The complete URL for user creation with email parameters
+ */
+export function getProtectedOwnerCreateAccountUrl( connectionError, baseUrl = '/wp-admin/' ) {
+	let redirectUrl = baseUrl + 'user-new.php';
+
+	// Add protected owner email if available for prepopulation
+	if ( connectionError?.error_data?.wpcom_user_email ) {
+		const params = new URLSearchParams( {
+			jetpack_protected_owner_email: connectionError.error_data.wpcom_user_email,
+			jetpack_create_missing_account: '1',
+		} );
+		redirectUrl += '?' + params.toString();
+	} else if ( connectionError?.error_data?.email ) {
+		const params = new URLSearchParams( {
+			jetpack_protected_owner_email: connectionError.error_data.email,
+			jetpack_create_missing_account: '1',
+		} );
+		redirectUrl += '?' + params.toString();
+	}
+
+	return redirectUrl;
+}
+
 /**
  * Connection error notice hook.
- * Returns a ConnectionErrorNotice component and the conditional flag on whether
+ * Returns connection error data and conditional flag on whether
  * to render the component or not.
  *
  * @return {object} - The hook data.
@@ -12,27 +41,90 @@ import useRestoreConnection from '../../hooks/use-restore-connection/index.jsx';
 export default function useConnectionErrorNotice() {
 	const { connectionErrors } = useConnection( {} );
 	const connectionErrorList = Object.values( connectionErrors ).shift();
-	const connectionErrorMessage =
+	const firstError =
 		connectionErrorList &&
 		Object.values( connectionErrorList ).length &&
-		Object.values( connectionErrorList ).shift().error_message;
+		Object.values( connectionErrorList ).shift();
 
+	const connectionErrorMessage = firstError && firstError.error_message;
+
+	// Return all connection errors, including protected owner errors
 	const hasConnectionError = Boolean( connectionErrorMessage );
 
-	return { hasConnectionError, connectionErrorMessage };
+	return {
+		hasConnectionError,
+		connectionErrorMessage,
+		connectionError: firstError, // Full error object with error_type, etc.
+		connectionErrors, // All errors for advanced use cases
+	};
 }
 
-export const ConnectionError = () => {
-	const { hasConnectionError, connectionErrorMessage } = useConnectionErrorNotice();
+export const ConnectionError = ( {
+	onCreateMissingAccount = null, // Custom handler for protected owner errors
+	trackingCallback = null, // Custom tracking function
+	customActions = null, // Function that returns custom actions based on error
+} = {} ) => {
+	const { hasConnectionError, connectionErrorMessage, connectionError } =
+		useConnectionErrorNotice();
 	const { restoreConnection, isRestoringConnection, restoreConnectionError } =
 		useRestoreConnection();
 
-	return hasConnectionError ? (
+	if ( ! hasConnectionError ) {
+		return null;
+	}
+
+	// Determine error type
+	const isProtectedOwnerError = connectionError && connectionError.error_type === 'protected_owner';
+
+	// Build actions array based on error type
+	let actions = [];
+
+	if ( customActions ) {
+		// Use provided custom actions function
+		actions = customActions( connectionError, { restoreConnection, isRestoringConnection } );
+	} else if ( isProtectedOwnerError && onCreateMissingAccount ) {
+		// Handle protected owner error with custom handler
+		actions = [
+			{
+				label: __( 'Create missing account', 'jetpack-connection-js' ),
+				onClick: () => {
+					if ( trackingCallback ) {
+						trackingCallback( 'jetpack_connection_protected_owner_create_account_attempt', {} );
+					}
+					onCreateMissingAccount();
+				},
+				variant: 'primary',
+			},
+		];
+	} else if ( ! isProtectedOwnerError ) {
+		// Standard connection error - use restore connection
+		actions = [
+			{
+				label: __( 'Restore Connection', 'jetpack-connection-js' ),
+				onClick: () => {
+					if ( trackingCallback ) {
+						trackingCallback( 'jetpack_connection_error_notice_reconnect_cta_click', {} );
+					}
+					restoreConnection();
+				},
+				isLoading: isRestoringConnection,
+				loadingText: __( 'Reconnecting Jetpack…', 'jetpack-connection-js' ),
+			},
+		];
+	}
+
+	// For protected owner errors without custom handler, don't show the component
+	if ( isProtectedOwnerError && ! onCreateMissingAccount && ! customActions ) {
+		return null;
+	}
+
+	return (
 		<ConnectionErrorNotice
 			isRestoringConnection={ isRestoringConnection }
 			restoreConnectionError={ restoreConnectionError }
-			restoreConnectionCallback={ restoreConnection }
+			restoreConnectionCallback={ actions.length === 0 ? restoreConnection : null } // Fallback for backward compatibility
 			message={ connectionErrorMessage }
+			actions={ actions }
 		/>
-	) : null;
+	);
 };

package/index.jsx

@@ -49,4 +49,7 @@ export { STORE_ID as CONNECTION_STORE_ID } from './state/store';
  */
 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';
+export {
+	default as useConnectionErrorNotice,
+	getProtectedOwnerCreateAccountUrl,
+} from './hooks/use-connection-error-notice';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "0.39.18",
+	"version": "1.1.0",
 	"description": "Jetpack Connection Component",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
 	"bugs": {
@@ -14,10 +14,10 @@
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
 	"dependencies": {
-		"@automattic/jetpack-analytics": "^0.1.37",
-		"@automattic/jetpack-api": "^0.20.3",
-		"@automattic/jetpack-components": "^0.73.4",
-		"@automattic/jetpack-config": "^0.1.29",
+		"@automattic/jetpack-analytics": "^1.0.0",
+		"@automattic/jetpack-api": "^1.0.0",
+		"@automattic/jetpack-components": "^1.1.0",
+		"@automattic/jetpack-config": "^1.0.0",
 		"@automattic/jetpack-script-data": "^0.4.2",
 		"@wordpress/base-styles": "6.0.0",
 		"@wordpress/browserslist-config": "6.24.0",
@@ -31,14 +31,14 @@
 		"prop-types": "^15.7.2"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.8.0",
-		"@babel/core": "7.26.10",
-		"@babel/preset-react": "7.26.3",
+		"@automattic/jetpack-base-styles": "^1.0.0",
+		"@babel/core": "7.27.4",
+		"@babel/preset-react": "7.27.1",
 		"@storybook/addon-actions": "8.6.7",
 		"@testing-library/dom": "10.4.0",
 		"@testing-library/react": "16.2.0",
 		"@testing-library/user-event": "14.6.1",
-		"@types/react": "18.3.18",
+		"@types/react": "18.3.23",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
 		"react": "18.3.1",