@automattic/jetpack-connection 1.2.14 → 1.3.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
 
+## [1.3.1] - 2025-07-28
+### Changed
+- Internal updates.
+
+## [1.3.0] - 2025-07-23
+### Changed
+- Connection: Remove hard-coded custom errors and added support for dynamic errors. [#44281]
+
 ## [1.2.14] - 2025-07-21
 ### Changed
 - Update package dependencies. [#44356]
@@ -1108,6 +1116,8 @@
 - `Main` and `ConnectUser` components added.
 - `JetpackRestApiClient` API client added.
 
+[1.3.1]: https://github.com/Automattic/jetpack-connection-js/compare/v1.3.0...v1.3.1
+[1.3.0]: https://github.com/Automattic/jetpack-connection-js/compare/v1.2.14...v1.3.0
 [1.2.14]: https://github.com/Automattic/jetpack-connection-js/compare/v1.2.13...v1.2.14
 [1.2.13]: https://github.com/Automattic/jetpack-connection-js/compare/v1.2.12...v1.2.13
 [1.2.12]: https://github.com/Automattic/jetpack-connection-js/compare/v1.2.11...v1.2.12

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

@@ -1,4 +1,4 @@
-@use '@wordpress/base-styles/breakpoints';
+@use "@wordpress/base-styles/breakpoints";
 
 .jp-connection__connect-screen {
 	--spacing-base: 8px;
@@ -49,7 +49,7 @@
 		width: 1px;
 		overflow: hidden;
 		white-space: nowrap;
-		
+
 		&:empty {
 			display: none;
 		}

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

@@ -1,5 +1,5 @@
-@use '@wordpress/base-styles/mixins';
-@use '@automattic/jetpack-base-styles/style';
+@use "@wordpress/base-styles/mixins";
+@use "@automattic/jetpack-base-styles/style";
 
 .jp-connection__connect-screen-layout {
 	background: var(--jp-white);
@@ -115,7 +115,7 @@
 		.jp-connection__connect-screen-layout__right {
 			flex-grow: 1;
 			flex-basis: 47%;
-			background: #F9F9F6;
+			background: #f9f9f6;
 			display: none;
 
 			@include mixins.break-xlarge {
@@ -145,7 +145,7 @@
 			padding: 4rem 6rem 4rem 4rem;
 		}
 	}
-	
+
 	.jp-connection__connect-screen-required-plan__pricing-card {
 
 		/** Line up with the top of the product logo,
@@ -157,7 +157,7 @@
 			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;
@@ -209,7 +209,7 @@
 			right: -100px;
 			top: -275px;
 			z-index: 3;
-			
+
 			background-color: var(--jp-blue-5);
 		}
 

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

@@ -1,4 +1,4 @@
-@use '@wordpress/base-styles/mixins';
+@use "@wordpress/base-styles/mixins";
 
 .jp-connection__connect-screen-layout__left {
 

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

@@ -1,4 +1,4 @@
-import { Spinner, useBreakpointMatch } from '@automattic/jetpack-components';
+import { Spinner } from '@automattic/jetpack-components';
 import { Icon, Notice, Path, SVG } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
@@ -19,9 +19,7 @@ const ConnectionErrorNotice = props => {
 		actions = [], // New prop for custom actions
 	} = props;
 
-	const [ isBiggerThanMedium ] = useBreakpointMatch( [ 'md' ], [ '>' ] );
-	const wrapperClassName =
-		styles.notice + ( isBiggerThanMedium ? ' ' + styles[ 'bigger-than-medium' ] : '' );
+	const wrapperClassName = styles.notice;
 
 	const icon = (
 		<Icon
@@ -82,31 +80,41 @@ const ConnectionErrorNotice = props => {
 
 	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>
-		) );
+		actionButtons = actions.map( ( action, index ) => {
+			let buttonClassName = styles.button;
+			if ( action.variant === 'primary' ) {
+				buttonClassName += ' ' + styles.primary;
+			} else if ( action.variant === 'secondary' ) {
+				buttonClassName += ' ' + styles.secondary;
+			}
+
+			return (
+				<button
+					key={ index }
+					type="button"
+					onClick={ action.onClick }
+					onKeyDown={ action.onClick }
+					className={ buttonClassName }
+					disabled={ action.isLoading }
+				>
+					{ action.isLoading
+						? action.loadingText || __( 'Loading…', 'jetpack-connection-js' )
+						: action.label }
+				</button>
+			);
+		} );
 	} else if ( restoreConnectionCallback ) {
 		// Use default restore connection action for backward compatibility
 		actionButtons = [
-			<a
+			<button
 				key="restore"
+				type="button"
 				onClick={ restoreConnectionCallback }
 				onKeyDown={ restoreConnectionCallback }
 				className={ styles.button }
-				href="#"
 			>
 				{ __( 'Restore Connection', 'jetpack-connection-js' ) }
-			</a>,
+			</button>,
 		];
 	}
 

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

@@ -25,7 +25,7 @@
 		margin: 0;
 		padding: 12px 4px;
 		flex-direction: column;
-		align-items: flex-start;
+		align-items: center;
 	}
 
 	// action button
@@ -44,7 +44,6 @@
 	.button:visited,
 	.button:active,
 	.button:hover {
-		color: var(--jp-white);
 		font-weight: 600;
 		font-size: 16px;
 		line-height: 24px;
@@ -54,23 +53,69 @@
 		justify-content: center;
 		align-items: center;
 		padding: 8px 24px;
+		border-radius: var(--jp-border-radius);
+		display: inline-block;
 		margin-left: calc(var(--spacing-base) * 2 + 24px); // 40px
 		margin-top: 24px;
-		background: #000;
-		border-radius: var(--jp-border-radius);
+	}
+
+	.primary,
+	.primary:visited,
+	.primary:active,
+	.primary:hover {
+		color: var(--jp-white);
+		background: var(--jp-black);
+		border: 1px solid transparent;
+	}
+
+	.secondary,
+	.secondary:visited,
+	.secondary:active,
+	.secondary:hover {
+		background: transparent;
+		color: var(--jp-gray-80);
+		border: 1px solid var(--jp-gray-30);
 
-		&.primary {
-			background: var(--jp-green-50);
+		&:hover {
+			color: var(--jp-gray-100);
+			border-color: var(--jp-gray-50);
 		}
 	}
 
 	.actions {
 		display: flex;
 		gap: calc(var(--spacing-base) * 2); // 16px
-		flex-wrap: wrap;
+		flex-direction: column;
+		text-align: center;
+		margin-top: calc(var(--spacing-base) * 2); // 16px
+
+		.button,
+		.button:visited,
+		.button:active,
+		.button:hover {
+			width: 100%;
+			max-width: 300px;
+			margin: 0;
+		}
 	}
 
-	&.bigger-than-medium {
+	// Media query for screens 1100px and above
+	@media (min-width: 1100px) {
+
+		.actions {
+			margin-left: 0;
+			margin-top: 0;
+			flex-direction: row;
+			align-items: center;
+
+			.button,
+			.button:visited,
+			.button:active,
+			.button:hover {
+				width: auto;
+				max-width: none;
+			}
+		}
 
 		.button,
 		.button:visited,

package/components/disconnect-card/style.scss

@@ -1,6 +1,6 @@
-@use '@automattic/jetpack-base-styles/style';
+@use "@automattic/jetpack-base-styles/style";
 
-// Used to show cards in the disconnection flow for active plugins and site benefits.
+// Show cards in the disconnection flow for active plugins and site benefits.
 .jp-connection__disconnect-card {
 	background-color: var(--jp-white);
 	width: 800px;

package/components/disconnect-dialog/style.scss

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/style';
+@use "@automattic/jetpack-base-styles/style";
 
 .jp-connection__disconnect-dialog {
 
@@ -91,7 +91,7 @@
 		}
 
 		&::before {
-			content: '';
+			content: "";
 			display: block;
 			width: 100%;
 			position: absolute;
@@ -156,7 +156,8 @@
 	justify-content: center;
 	align-items: center;
 
-	// When the screen height is shorter, hide the decorative cards to show the text and controls without scrolling.
+	// When the screen height is shorter, hide the decorative cards to
+	// show the text and controls without scrolling.
 	@media (max-height: 900px) {
 
 		.jp-components__decorative-card {

package/components/disconnect-survey/_jp-connect_disconnect-survey-card.scss

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/style';
+@use "@automattic/jetpack-base-styles/style";
 
 .jp-connect__disconnect-survey-card {
 	border: 2px solid transparent;
@@ -18,7 +18,7 @@
 	}
 
 	&::after {
-		content: '';
+		content: "";
 		display: block;
 		width: 5px;
 		height: 5px;
@@ -38,7 +38,7 @@
 	&:focus {
 
 		&:not(.jp-disconnect-survey-card--selected) {
-			border-color: var(--jp-black-80)
+			border-color: var(--jp-black-80);
 		}
 	}
 

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

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/style';
+@use "@automattic/jetpack-base-styles/style";
 
 .jp-connection__manage-dialog {
 	--spacing-base: 8px;
@@ -85,7 +85,7 @@
 		}
 
 		&.disabled::before {
-			content: '';
+			content: "";
 			display: block;
 			position: absolute;
 			top: 0;

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

@@ -3,34 +3,6 @@ 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 connection error data and conditional flag on whether
@@ -48,7 +20,7 @@ export default function useConnectionErrorNotice() {
 
 	const connectionErrorMessage = firstError && firstError.error_message;
 
-	// Return all connection errors, including protected owner errors
+	// Return all connection errors
 	const hasConnectionError = Boolean( connectionErrorMessage );
 
 	return {
@@ -60,9 +32,9 @@ export default function useConnectionErrorNotice() {
 }
 
 export const ConnectionError = ( {
-	onCreateMissingAccount = null, // Custom handler for protected owner errors
+	actionHandlers = {}, // Handlers for specific actions like { create_missing_account: () => {}, custom_action: () => {} }
 	trackingCallback = null, // Custom tracking function
-	customActions = null, // Function that returns custom actions based on error
+	customActions = null, // Function that returns custom actions based on error (takes precedence)
 } = {} ) => {
 	const { hasConnectionError, connectionErrorMessage, connectionError } =
 		useConnectionErrorNotice();
@@ -73,48 +45,140 @@ export const ConnectionError = ( {
 		return null;
 	}
 
-	// Determine error type
-	const isProtectedOwnerError = connectionError && connectionError.error_type === 'protected_owner';
-
-	// Build actions array based on error type
+	// Build actions array based on error data
 	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();
+		try {
+			actions = customActions( connectionError, { restoreConnection, isRestoringConnection } );
+		} catch {
+			// Silently fall back to default behavior if customActions fails
+			actions = [];
+		}
+	} else {
+		// Get action info from error data
+		const errorData = connectionError?.error_data || {};
+		const suggestedAction = errorData.action;
+		const actionHandler = actionHandlers[ suggestedAction ];
+
+		if ( suggestedAction && actionHandler ) {
+			// Use action data from the error
+			const actionLabel = errorData.action_label || __( 'Take Action', 'jetpack-connection-js' );
+			const actionVariant = errorData.action_variant || 'primary';
+			const trackingEvent = errorData.tracking_event;
+
+			actions = [
+				{
+					label: actionLabel,
+					onClick: () => {
+						try {
+							if ( trackingCallback && trackingEvent ) {
+								trackingCallback( trackingEvent, {} );
+							}
+							actionHandler( connectionError );
+						} catch {
+							// Silently fail if action handler throws
+						}
+					},
+					variant: actionVariant,
+				},
+			];
+		} else if ( errorData.action_url && errorData.action_label ) {
+			// Generic link action - requires both URL and label for clarity
+			const actionLabel = errorData.action_label;
+			const actionVariant = errorData.action_variant || 'primary';
+			const trackingEvent = errorData.tracking_event;
+
+			actions = [
+				{
+					label: actionLabel,
+					onClick: () => {
+						try {
+							if ( trackingCallback && trackingEvent ) {
+								trackingCallback( trackingEvent, {} );
+							}
+							window.location.href = errorData.action_url;
+						} catch {
+							// Silently fail if navigation throws
+						}
+					},
+					variant: actionVariant,
 				},
-				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();
+			];
+		} else {
+			// Default action - restore connection
+			actions = [
+				{
+					label: __( 'Restore Connection', 'jetpack-connection-js' ),
+					onClick: () => {
+						try {
+							if ( trackingCallback ) {
+								trackingCallback( 'jetpack_connection_error_notice_reconnect_cta_click', {} );
+							}
+							restoreConnection();
+						} catch {
+							// Silently fail if restore connection throws
+						}
+					},
+					isLoading: isRestoringConnection,
+					loadingText: __( 'Reconnecting Jetpack…', 'jetpack-connection-js' ),
 				},
-				isLoading: isRestoringConnection,
-				loadingText: __( 'Reconnecting Jetpack…', 'jetpack-connection-js' ),
-			},
-		];
+			];
+		}
+
+		// Add secondary action if available (only for custom errors, not default restore)
+		if ( actions.length > 0 && ( suggestedAction || errorData.action_url ) ) {
+			const secondaryAction = errorData.secondary_action;
+			const secondaryActionHandler = actionHandlers[ secondaryAction ];
+			const secondaryActionUrl = errorData.secondary_action_url;
+			const secondaryActionLabel = errorData.secondary_action_label;
+
+			// Secondary action with handler
+			if ( secondaryAction && secondaryActionHandler && secondaryActionLabel ) {
+				const secondaryActionVariant = errorData.secondary_action_variant || 'secondary';
+				const secondaryTrackingEvent = errorData.secondary_tracking_event;
+
+				actions.push( {
+					label: secondaryActionLabel,
+					onClick: () => {
+						try {
+							if ( trackingCallback && secondaryTrackingEvent ) {
+								trackingCallback( secondaryTrackingEvent, {} );
+							}
+							secondaryActionHandler( connectionError );
+						} catch {
+							// Silently fail if secondary action handler throws
+						}
+					},
+					variant: secondaryActionVariant,
+				} );
+			}
+			// Secondary action with URL (requires both URL and label)
+			else if ( secondaryActionUrl && secondaryActionLabel ) {
+				const secondaryActionVariant = errorData.secondary_action_variant || 'secondary';
+				const secondaryTrackingEvent = errorData.secondary_tracking_event;
+
+				actions.push( {
+					label: secondaryActionLabel,
+					onClick: () => {
+						try {
+							if ( trackingCallback && secondaryTrackingEvent ) {
+								trackingCallback( secondaryTrackingEvent, {} );
+							}
+							window.location.href = secondaryActionUrl;
+						} catch {
+							// Silently fail if secondary action navigation throws
+						}
+					},
+					variant: secondaryActionVariant,
+				} );
+			}
+		}
 	}
 
-	// For protected owner errors without custom handler, don't show the component
-	if ( isProtectedOwnerError && ! onCreateMissingAccount && ! customActions ) {
+	// If no actions are available and no custom handler provided, don't render
+	if ( actions.length === 0 && ! customActions ) {
 		return null;
 	}
 

package/index.jsx

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "1.2.14",
+	"version": "1.3.1",
 	"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": "^1.0.3",
 		"@automattic/jetpack-api": "^1.0.5",
-		"@automattic/jetpack-components": "^1.1.14",
+		"@automattic/jetpack-components": "^1.1.15",
 		"@automattic/jetpack-config": "^1.0.3",
 		"@automattic/jetpack-script-data": "^0.5.0",
 		"@wordpress/base-styles": "6.2.0",
@@ -31,7 +31,7 @@
 		"prop-types": "^15.7.2"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.0.5",
+		"@automattic/jetpack-base-styles": "^1.0.6",
 		"@babel/core": "7.28.0",
 		"@babel/preset-react": "7.27.1",
 		"@testing-library/dom": "10.4.0",