@automattic/jetpack-connection 1.4.37 → 1.4.38

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
 
+## [1.4.38] - 2026-03-02
+### Changed
+- Convert `useConnection` hook to TypeScript. [#47380]
+
 ## [1.4.37] - 2026-02-26
 ### Changed
 - Update package dependencies. [#47285] [#47300] [#47309]
@@ -1281,6 +1285,7 @@
 - `Main` and `ConnectUser` components added.
 - `JetpackRestApiClient` API client added.
 
+[1.4.38]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.37...v1.4.38
 [1.4.37]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.36...v1.4.37
 [1.4.36]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.35...v1.4.36
 [1.4.35]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.34...v1.4.35

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

@@ -78,7 +78,7 @@ const ConnectScreen: FC< Props > = ( {
 
 	const displayButtonError = Boolean( registrationError );
 	const buttonIsLoading = siteIsRegistering || userIsConnecting;
-	const errorCode = registrationError?.response?.code;
+	const errorCode = registrationError ? registrationError.response?.code : undefined;
 
 	return (
 		<ConnectScreenVisual

package/components/use-connection/{index.jsx → index.ts}

@@ -2,23 +2,26 @@ import restApi from '@automattic/jetpack-api';
 import { getScriptData } from '@automattic/jetpack-script-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from 'react';
-import { STORE_ID } from '../../state/store';
+import { STORE_ID } from '../../state/store.jsx';
+import type {
+	RegistrationError,
+	UserConnectionData,
+	UseConnectionProps,
+	UseConnectionReturn,
+} from './types.ts';
 
-const initialState = window?.JP_CONNECTION_INITIAL_STATE || getScriptData()?.connection || {};
+type StoreSelector = ( storeId: string ) => Record< string, ( ...args: unknown[] ) => unknown >;
+
+const initialState =
+	window?.JP_CONNECTION_INITIAL_STATE ||
+	getScriptData()?.connection ||
+	( {} as Record< string, string > );
 
 /**
  * Hook to handle the connection process.
  *
- * @param {object}  [props]                    - The props.
- * @param {string}  [props.registrationNonce]  - The registration nonce.
- * @param {string}  [props.apiRoot]            - The API root URL.
- * @param {string}  [props.apiNonce]           - The API nonce.
- * @param {string}  [props.redirectUri]        - The redirect URI.
- * @param {boolean} [props.autoTrigger]        - Whether to auto-trigger the connection process.
- * @param {string}  [props.from]               - Value that represents the redirect origin.
- * @param {boolean} [props.skipUserConnection] - Whether to skip user connection.
- * @param {boolean} [props.skipPricingPage]    - Whether to skip the pricing page.
- * @return {object} The connection state and handlers.
+ * @param {UseConnectionProps} props - The props.
+ * @return {UseConnectionReturn} The connection state and handlers.
  */
 export default function useConnection( {
 	registrationNonce = initialState.registrationNonce,
@@ -29,10 +32,14 @@ export default function useConnection( {
 	from,
 	skipUserConnection,
 	skipPricingPage,
-} = {} ) {
+}: UseConnectionProps = {} ): UseConnectionReturn {
 	const { registerSite, connectUser, refreshConnectedPlugins } = useDispatch( STORE_ID );
 
-	const registrationError = useSelect( select => select( STORE_ID ).getRegistrationError() );
+	const registrationError = useSelect(
+		( select: StoreSelector ) =>
+			select( STORE_ID ).getRegistrationError() as RegistrationError | false,
+		[]
+	);
 	const {
 		siteIsRegistering,
 		userIsConnecting,
@@ -43,26 +50,34 @@ export default function useConnection( {
 		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(),
-	} ) );
+	} = useSelect( ( select: StoreSelector ) => {
+		const connectionStatus = select( STORE_ID ).getConnectionStatus() as Record< string, unknown >;
+		return {
+			siteIsRegistering: select( STORE_ID ).getSiteIsRegistering() as boolean,
+			userIsConnecting: select( STORE_ID ).getUserIsConnecting() as boolean,
+			userConnectionData: ( select( STORE_ID ).getUserConnectionData() ||
+				{} ) as UserConnectionData,
+			connectedPlugins: select( STORE_ID ).getConnectedPlugins() as
+				| Record< string, unknown >
+				| unknown[],
+			connectionErrors: select( STORE_ID ).getConnectionErrors() as Array< string | object >,
+			isOfflineMode: select( STORE_ID ).getIsOfflineMode() as boolean,
+			isRegistered: ( connectionStatus.isRegistered ?? false ) as boolean,
+			isUserConnected: ( connectionStatus.isUserConnected ?? false ) as boolean,
+			hasConnectedOwner: ( connectionStatus.hasConnectedOwner ?? false ) as boolean,
+		};
+	}, [] );
 
 	/**
 	 * User register process handler.
 	 *
-	 * @return {Promise} - Promise which resolves when the product status is activated.
+	 * @return Promise when running the user connection process. Otherwise, nothing.
 	 */
-	const handleConnectUser = () => {
+	const handleConnectUser = (): Promise< unknown > => {
 		if ( ! skipUserConnection ) {
 			return connectUser( { from, redirectUri, skipPricingPage } );
 		} else if ( redirectUri ) {
-			window.location = redirectUri;
+			window.location.href = redirectUri;
 			return Promise.resolve( redirectUri );
 		}
 
@@ -79,9 +94,9 @@ export default function useConnection( {
 	 * the site was successfully registered.
 	 *
 	 * @param {Event} [e] - Event that dispatched handleRegisterSite
-	 * @return {Promise}   Promise when running the registration process. Otherwise, nothing.
+	 * @return Promise when running the site connection process. Otherwise, nothing.
 	 */
-	const handleRegisterSite = e => {
+	const handleRegisterSite = ( e?: Event ): Promise< unknown > => {
 		e && e.preventDefault();
 
 		if ( isRegistered ) {

package/components/use-connection/types.ts

@@ -0,0 +1,77 @@
+export interface UseConnectionProps {
+	/**
+	 * The registration nonce.
+	 */
+	registrationNonce?: string;
+	/**
+	 * The API root URL.
+	 */
+	apiRoot?: string;
+	/**
+	 * The API nonce.
+	 */
+	apiNonce?: string;
+	/**
+	 * The redirect URI.
+	 */
+	redirectUri?: string;
+	/**
+	 * Whether to auto-trigger the connection process.
+	 */
+	autoTrigger?: boolean;
+	/**
+	 * Value that represents the redirect origin.
+	 */
+	from?: string;
+	/**
+	 * Whether to skip user connection.
+	 */
+	skipUserConnection?: boolean;
+	/**
+	 * Whether to skip the pricing page.
+	 */
+	skipPricingPage?: boolean;
+}
+
+export interface WpcomUser {
+	display_name?: string;
+	email?: string;
+	login?: string;
+	avatar?: string;
+	ID?: number;
+	[ key: string ]: unknown;
+}
+
+export interface UserConnectionData {
+	currentUser?: {
+		wpcomUser?: WpcomUser;
+		username?: string;
+		isMaster?: boolean;
+		possibleAccountErrors?: Record< string, unknown >;
+		[ key: string ]: unknown;
+	};
+	connectionOwner?: string | null;
+	[ key: string ]: unknown;
+}
+
+export interface RegistrationError {
+	message?: string;
+	response?: { code?: string };
+	[ key: string ]: unknown;
+}
+
+export interface UseConnectionReturn {
+	handleRegisterSite: ( e?: Event ) => Promise< unknown >;
+	handleConnectUser: () => Promise< unknown >;
+	refreshConnectedPlugins: () => Promise< unknown >;
+	isRegistered: boolean;
+	isUserConnected: boolean;
+	siteIsRegistering: boolean;
+	userIsConnecting: boolean;
+	registrationError: RegistrationError | false;
+	userConnectionData: UserConnectionData;
+	hasConnectedOwner: boolean;
+	connectedPlugins: Record< string, unknown > | unknown[];
+	connectionErrors: Array< string | object >;
+	isOfflineMode: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "1.4.37",
+	"version": "1.4.38",
 	"description": "Jetpack Connection Component",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
 	"bugs": {
@@ -20,7 +20,7 @@
 	"type": "module",
 	"exports": {
 		".": "./index.jsx",
-		"./use-connection": "./components/use-connection/index.jsx"
+		"./use-connection": "./components/use-connection/index.ts"
 	},
 	"scripts": {
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest",