Connection: offline mode for 127.0.0.1 and proper error messages (#32…

…898)

- Add 127.0.0.1 into the list of known offline domain names to force offline mode upon it
- Display proper connection error message if trying to connect with a known local domain name

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/6277837184

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
 
+## [0.30.0-alpha] - unreleased
+
+This is an alpha version! The changes listed here are not final.
+
+### Added
+- Handle connection error codes and display proper error messages. Enabled for the "private network" error only at the moment.
+
 ## [0.29.10] - 2023-09-13
 ### Changed
 - Updated package dependencies. [#33001]
@@ -628,6 +635,7 @@
 - `Main` and `ConnectUser` components added.
 - `JetpackRestApiClient` API client added.
 
+[0.30.0-alpha]: https://github.com/Automattic/jetpack-connection-js/compare/v0.29.10...v0.30.0-alpha
 [0.29.10]: https://github.com/Automattic/jetpack-connection-js/compare/v0.29.9...v0.29.10
 [0.29.9]: https://github.com/Automattic/jetpack-connection-js/compare/v0.29.8...v0.29.9
 [0.29.8]: https://github.com/Automattic/jetpack-connection-js/compare/v0.29.7...v0.29.8

components/connect-screen/basic/index.jsx

@@ -58,6 +58,7 @@ const ConnectScreen = ( {
 
 	const displayButtonError = Boolean( registrationError );
 	const buttonIsLoading = siteIsRegistering || userIsConnecting;
+	const errorCode = registrationError?.response?.code;
 
 	return (
 		<ConnectScreenVisual
@@ -67,6 +68,7 @@ const ConnectScreen = ( {
 			buttonLabel={ buttonLabel }
 			handleButtonClick={ handleRegisterSite }
 			displayButtonError={ displayButtonError }
+			errorCode={ errorCode }
 			buttonIsLoading={ buttonIsLoading }
 			footer={ footer }
 			isOfflineMode={ isOfflineMode }

components/connect-screen/basic/visual.jsx

@@ -22,23 +22,41 @@ const ConnectScreenVisual = props => {
 		buttonLabel,
 		handleButtonClick,
 		displayButtonError,
+		errorCode,
 		buttonIsLoading,
 		footer,
 		isOfflineMode,
 		logo,
 	} = props;
 
-	const errorMessage = isOfflineMode
-		? createInterpolateElement( __( 'Unavailable in <a>Offline Mode</a>', 'jetpack' ), {
+	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"
 					/>
 				),
-		  } )
-		: undefined;
+			} );
+		}
+	};
+
+	const errorMessage = getErrorMessage( errorCode, isOfflineMode );
 
 	return (
 		<ConnectScreenLayout
@@ -87,6 +105,8 @@ ConnectScreenVisual.propTypes = {
 	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,
 	/** Node that will be rendered after ToS */
@@ -101,6 +121,7 @@ ConnectScreenVisual.defaultProps = {
 	isLoading: false,
 	buttonIsLoading: false,
 	displayButtonError: false,
+	errorCode: null,
 	handleButtonClick: () => {},
 	footer: null,
 	isOfflineMode: false,

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "0.29.10",
+	"version": "0.30.0-alpha",
 	"description": "Jetpack Connection Component",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
 	"bugs": {