@automattic/jetpack-connection 1.4.36 → 1.4.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/components/connect-screen/basic/index.tsx +1 -1
  3. package/components/use-connection/{index.jsx → index.ts} +43 -28
  4. package/components/use-connection/types.ts +77 -0
  5. package/package.json +16 -16
package/CHANGELOG.md CHANGED
@@ -2,6 +2,14 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Connection Component releases.
4
4
 
5
+ ## [1.4.38] - 2026-03-02
6
+ ### Changed
7
+ - Convert `useConnection` hook to TypeScript. [#47380]
8
+
9
+ ## [1.4.37] - 2026-02-26
10
+ ### Changed
11
+ - Update package dependencies. [#47285] [#47300] [#47309]
12
+
5
13
  ## [1.4.36] - 2026-02-23
6
14
  ### Changed
7
15
  - Update dependencies.
@@ -1277,6 +1285,8 @@
1277
1285
  - `Main` and `ConnectUser` components added.
1278
1286
  - `JetpackRestApiClient` API client added.
1279
1287
 
1288
+ [1.4.38]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.37...v1.4.38
1289
+ [1.4.37]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.36...v1.4.37
1280
1290
  [1.4.36]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.35...v1.4.36
1281
1291
  [1.4.35]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.34...v1.4.35
1282
1292
  [1.4.34]: https://github.com/Automattic/jetpack-connection-js/compare/v1.4.33...v1.4.34
package/components/connect-screen/basic/index.tsx CHANGED
@@ -78,7 +78,7 @@ const ConnectScreen: FC< Props > = ( {
78
78
 
79
79
  const displayButtonError = Boolean( registrationError );
80
80
  const buttonIsLoading = siteIsRegistering || userIsConnecting;
81
- const errorCode = registrationError?.response?.code;
81
+ const errorCode = registrationError ? registrationError.response?.code : undefined;
82
82
 
83
83
  return (
84
84
  <ConnectScreenVisual
package/components/use-connection/{index.jsx → index.ts} RENAMED
@@ -2,23 +2,26 @@ import restApi from '@automattic/jetpack-api';
2
2
  import { getScriptData } from '@automattic/jetpack-script-data';
3
3
  import { useSelect, useDispatch } from '@wordpress/data';
4
4
  import { useEffect } from 'react';
5
- import { STORE_ID } from '../../state/store';
5
+ import { STORE_ID } from '../../state/store.jsx';
6
+ import type {
7
+ RegistrationError,
8
+ UserConnectionData,
9
+ UseConnectionProps,
10
+ UseConnectionReturn,
11
+ } from './types.ts';
6
12
 
7
- const initialState = window?.JP_CONNECTION_INITIAL_STATE || getScriptData()?.connection || {};
13
+ type StoreSelector = ( storeId: string ) => Record< string, ( ...args: unknown[] ) => unknown >;
14
+
15
+ const initialState =
16
+ window?.JP_CONNECTION_INITIAL_STATE ||
17
+ getScriptData()?.connection ||
18
+ ( {} as Record< string, string > );
8
19
 
9
20
  /**
10
21
  * Hook to handle the connection process.
11
22
  *
12
- * @param {object} [props] - The props.
13
- * @param {string} [props.registrationNonce] - The registration nonce.
14
- * @param {string} [props.apiRoot] - The API root URL.
15
- * @param {string} [props.apiNonce] - The API nonce.
16
- * @param {string} [props.redirectUri] - The redirect URI.
17
- * @param {boolean} [props.autoTrigger] - Whether to auto-trigger the connection process.
18
- * @param {string} [props.from] - Value that represents the redirect origin.
19
- * @param {boolean} [props.skipUserConnection] - Whether to skip user connection.
20
- * @param {boolean} [props.skipPricingPage] - Whether to skip the pricing page.
21
- * @return {object} The connection state and handlers.
23
+ * @param {UseConnectionProps} props - The props.
24
+ * @return {UseConnectionReturn} The connection state and handlers.
22
25
  */
23
26
  export default function useConnection( {
24
27
  registrationNonce = initialState.registrationNonce,
@@ -29,10 +32,14 @@ export default function useConnection( {
29
32
  from,
30
33
  skipUserConnection,
31
34
  skipPricingPage,
32
- } = {} ) {
35
+ }: UseConnectionProps = {} ): UseConnectionReturn {
33
36
  const { registerSite, connectUser, refreshConnectedPlugins } = useDispatch( STORE_ID );
34
37
 
35
- const registrationError = useSelect( select => select( STORE_ID ).getRegistrationError() );
38
+ const registrationError = useSelect(
39
+ ( select: StoreSelector ) =>
40
+ select( STORE_ID ).getRegistrationError() as RegistrationError | false,
41
+ []
42
+ );
36
43
  const {
37
44
  siteIsRegistering,
38
45
  userIsConnecting,
@@ -43,26 +50,34 @@ export default function useConnection( {
43
50
  isUserConnected,
44
51
  hasConnectedOwner,
45
52
  isOfflineMode,
46
- } = useSelect( select => ( {
47
- siteIsRegistering: select( STORE_ID ).getSiteIsRegistering(),
48
- userIsConnecting: select( STORE_ID ).getUserIsConnecting(),
49
- userConnectionData: select( STORE_ID ).getUserConnectionData(),
50
- connectedPlugins: select( STORE_ID ).getConnectedPlugins(),
51
- connectionErrors: select( STORE_ID ).getConnectionErrors(),
52
- isOfflineMode: select( STORE_ID ).getIsOfflineMode(),
53
- ...select( STORE_ID ).getConnectionStatus(),
54
- } ) );
53
+ } = useSelect( ( select: StoreSelector ) => {
54
+ const connectionStatus = select( STORE_ID ).getConnectionStatus() as Record< string, unknown >;
55
+ return {
56
+ siteIsRegistering: select( STORE_ID ).getSiteIsRegistering() as boolean,
57
+ userIsConnecting: select( STORE_ID ).getUserIsConnecting() as boolean,
58
+ userConnectionData: ( select( STORE_ID ).getUserConnectionData() ||
59
+ {} ) as UserConnectionData,
60
+ connectedPlugins: select( STORE_ID ).getConnectedPlugins() as
61
+ | Record< string, unknown >
62
+ | unknown[],
63
+ connectionErrors: select( STORE_ID ).getConnectionErrors() as Array< string | object >,
64
+ isOfflineMode: select( STORE_ID ).getIsOfflineMode() as boolean,
65
+ isRegistered: ( connectionStatus.isRegistered ?? false ) as boolean,
66
+ isUserConnected: ( connectionStatus.isUserConnected ?? false ) as boolean,
67
+ hasConnectedOwner: ( connectionStatus.hasConnectedOwner ?? false ) as boolean,
68
+ };
69
+ }, [] );
55
70
 
56
71
  /**
57
72
  * User register process handler.
58
73
  *
59
- * @return {Promise} - Promise which resolves when the product status is activated.
74
+ * @return Promise when running the user connection process. Otherwise, nothing.
60
75
  */
61
- const handleConnectUser = () => {
76
+ const handleConnectUser = (): Promise< unknown > => {
62
77
  if ( ! skipUserConnection ) {
63
78
  return connectUser( { from, redirectUri, skipPricingPage } );
64
79
  } else if ( redirectUri ) {
65
- window.location = redirectUri;
80
+ window.location.href = redirectUri;
66
81
  return Promise.resolve( redirectUri );
67
82
  }
68
83
 
@@ -79,9 +94,9 @@ export default function useConnection( {
79
94
  * the site was successfully registered.
80
95
  *
81
96
  * @param {Event} [e] - Event that dispatched handleRegisterSite
82
- * @return {Promise} Promise when running the registration process. Otherwise, nothing.
97
+ * @return Promise when running the site connection process. Otherwise, nothing.
83
98
  */
84
- const handleRegisterSite = e => {
99
+ const handleRegisterSite = ( e?: Event ): Promise< unknown > => {
85
100
  e && e.preventDefault();
86
101
 
87
102
  if ( isRegistered ) {
package/components/use-connection/types.ts ADDED
@@ -0,0 +1,77 @@
1
+ export interface UseConnectionProps {
2
+ /**
3
+ * The registration nonce.
4
+ */
5
+ registrationNonce?: string;
6
+ /**
7
+ * The API root URL.
8
+ */
9
+ apiRoot?: string;
10
+ /**
11
+ * The API nonce.
12
+ */
13
+ apiNonce?: string;
14
+ /**
15
+ * The redirect URI.
16
+ */
17
+ redirectUri?: string;
18
+ /**
19
+ * Whether to auto-trigger the connection process.
20
+ */
21
+ autoTrigger?: boolean;
22
+ /**
23
+ * Value that represents the redirect origin.
24
+ */
25
+ from?: string;
26
+ /**
27
+ * Whether to skip user connection.
28
+ */
29
+ skipUserConnection?: boolean;
30
+ /**
31
+ * Whether to skip the pricing page.
32
+ */
33
+ skipPricingPage?: boolean;
34
+ }
35
+
36
+ export interface WpcomUser {
37
+ display_name?: string;
38
+ email?: string;
39
+ login?: string;
40
+ avatar?: string;
41
+ ID?: number;
42
+ [ key: string ]: unknown;
43
+ }
44
+
45
+ export interface UserConnectionData {
46
+ currentUser?: {
47
+ wpcomUser?: WpcomUser;
48
+ username?: string;
49
+ isMaster?: boolean;
50
+ possibleAccountErrors?: Record< string, unknown >;
51
+ [ key: string ]: unknown;
52
+ };
53
+ connectionOwner?: string | null;
54
+ [ key: string ]: unknown;
55
+ }
56
+
57
+ export interface RegistrationError {
58
+ message?: string;
59
+ response?: { code?: string };
60
+ [ key: string ]: unknown;
61
+ }
62
+
63
+ export interface UseConnectionReturn {
64
+ handleRegisterSite: ( e?: Event ) => Promise< unknown >;
65
+ handleConnectUser: () => Promise< unknown >;
66
+ refreshConnectedPlugins: () => Promise< unknown >;
67
+ isRegistered: boolean;
68
+ isUserConnected: boolean;
69
+ siteIsRegistering: boolean;
70
+ userIsConnecting: boolean;
71
+ registrationError: RegistrationError | false;
72
+ userConnectionData: UserConnectionData;
73
+ hasConnectedOwner: boolean;
74
+ connectedPlugins: Record< string, unknown > | unknown[];
75
+ connectionErrors: Array< string | object >;
76
+ isOfflineMode: boolean;
77
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-connection",
3
- "version": "1.4.36",
3
+ "version": "1.4.38",
4
4
  "description": "Jetpack Connection Component",
5
5
  "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/connection/#readme",
6
6
  "bugs": {
@@ -20,7 +20,7 @@
20
20
  "type": "module",
21
21
  "exports": {
22
22
  ".": "./index.jsx",
23
- "./use-connection": "./components/use-connection/index.jsx"
23
+ "./use-connection": "./components/use-connection/index.ts"
24
24
  },
25
25
  "scripts": {
26
26
  "test": "NODE_OPTIONS=--experimental-vm-modules jest",
@@ -29,34 +29,34 @@
29
29
  },
30
30
  "dependencies": {
31
31
  "@automattic/jetpack-analytics": "^1.0.8",
32
- "@automattic/jetpack-api": "^1.0.17",
33
- "@automattic/jetpack-components": "^1.4.15",
32
+ "@automattic/jetpack-api": "^1.0.18",
33
+ "@automattic/jetpack-components": "^1.4.16",
34
34
  "@automattic/jetpack-config": "^1.0.7",
35
- "@automattic/jetpack-script-data": "^0.5.5",
36
- "@wordpress/base-styles": "6.15.0",
37
- "@wordpress/browserslist-config": "6.39.0",
38
- "@wordpress/components": "32.1.0",
39
- "@wordpress/data": "10.39.0",
40
- "@wordpress/element": "6.39.0",
41
- "@wordpress/i18n": "6.12.0",
42
- "@wordpress/icons": "11.6.0",
43
- "@wordpress/url": "4.39.0",
35
+ "@automattic/jetpack-script-data": "^0.6.0",
36
+ "@wordpress/base-styles": "6.16.0",
37
+ "@wordpress/browserslist-config": "6.40.0",
38
+ "@wordpress/components": "32.2.0",
39
+ "@wordpress/data": "10.40.0",
40
+ "@wordpress/element": "6.40.0",
41
+ "@wordpress/i18n": "6.13.0",
42
+ "@wordpress/icons": "11.7.0",
43
+ "@wordpress/url": "4.40.0",
44
44
  "clsx": "2.1.1",
45
45
  "debug": "4.4.3",
46
46
  "prop-types": "^15.7.2"
47
47
  },
48
48
  "devDependencies": {
49
- "@automattic/jetpack-base-styles": "^1.0.17",
49
+ "@automattic/jetpack-base-styles": "^1.0.18",
50
50
  "@babel/core": "7.29.0",
51
51
  "@babel/preset-react": "7.28.5",
52
52
  "@testing-library/dom": "10.4.1",
53
53
  "@testing-library/react": "16.3.0",
54
54
  "@testing-library/user-event": "14.6.1",
55
- "@types/react": "18.3.26",
55
+ "@types/react": "18.3.28",
56
56
  "jest": "30.2.0",
57
57
  "react": "18.3.1",
58
58
  "react-dom": "18.3.1",
59
- "storybook": "10.2.3",
59
+ "storybook": "10.2.11",
60
60
  "typescript": "5.9.3"
61
61
  },
62
62
  "peerDependencies": {