Update/use connection to use my jetpack connection hook

projects/packages/my-jetpack/_inc/components/add-license-screen/index.jsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { AdminPage, Container, Col } from '@automattic/jetpack-components';
-import { useConnection } from '@automattic/jetpack-connection';
 import { ActivationScreen } from '@automattic/jetpack-licensing';
 import React, { useCallback, useState, useMemo } from 'react';
 /*
@@ -12,6 +11,7 @@ import { QUERY_LICENSES_KEY } from '../../data/constants';
 import useJetpackApiQuery from '../../data/use-jetpack-api-query';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import useAnalytics from '../../hooks/use-analytics';
+import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
 import GoBackLink from '../go-back-link';
 
 /**
@@ -25,7 +25,7 @@ export default function AddLicenseScreen() {
 		name: QUERY_LICENSES_KEY,
 		queryFn: async api => ( await api.getUserLicenses() )?.items,
 	} );
-	const { userConnectionData } = useConnection();
+	const { userConnectionData } = useMyJetpackConnection();
 	const [ hasActivatedLicense, setHasActivatedLicense ] = useState( false );
 
 	// They might not have a display name set in wpcom, so fall back to wpcom login or local username.

projects/packages/my-jetpack/_inc/components/connected-product-card/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { Text } from '@automattic/jetpack-components';
-import { useConnection } from '@automattic/jetpack-connection';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useEffect } from 'react';
 /**
@@ -14,6 +13,7 @@ import useActivate from '../../data/products/use-activate';
 import useInstallStandalonePlugin from '../../data/products/use-install-standalone-plugin';
 import useProduct from '../../data/products/use-product';
 import useAnalytics from '../../hooks/use-analytics';
+import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
 import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate';
 import ProductCard from '../product-card';
 import type { AdditionalAction, SecondaryAction } from '../product-card/types';
@@ -22,10 +22,10 @@ import type { FC, ReactNode } from 'react';
 interface ConnectedProductCardProps {
 	admin: boolean;
 	recommendation: boolean;
-	slug: string;
+	slug: JetpackModule;
 	children: ReactNode;
 	isDataLoading?: boolean;
-	Description?: React.JSX.Element | ( () => null );
+	Description?: FC;
 	additionalActions?: AdditionalAction[];
 	secondaryAction?: SecondaryAction;
 	upgradeInInterstitial?: boolean;
@@ -48,7 +48,7 @@ const ConnectedProductCard: FC< ConnectedProductCardProps > = ( {
 	onMouseEnter,
 	onMouseLeave,
 } ) => {
-	const { isRegistered, isUserConnected } = useConnection();
+	const { isRegistered, isUserConnected } = useMyJetpackConnection();
 	const { recordEvent } = useAnalytics();
 
 	const { install: installStandalonePlugin, isPending: isInstalling } =
@@ -74,7 +74,7 @@ const ConnectedProductCard: FC< ConnectedProductCardProps > = ( {
 			return;
 		}
 
-		activate();
+		activate( {} );
 	}, [
 		activate,
 		isRegistered,

projects/packages/my-jetpack/_inc/components/connection-status-card/index.tsx

@@ -1,9 +1,5 @@
 import { Button, getRedirectUrl, H3, Text } from '@automattic/jetpack-components';
-import {
-	ManageConnectionDialog,
-	useConnection,
-	CONNECTION_STORE_ID,
-} from '@automattic/jetpack-connection';
+import { ManageConnectionDialog, CONNECTION_STORE_ID } from '@automattic/jetpack-connection';
 import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, info, check, lockOutline } from '@wordpress/icons';
@@ -13,6 +9,7 @@ import { useAllProducts } from '../../data/products/use-product';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import getProductSlugsThatRequireUserConnection from '../../data/utils/get-product-slugs-that-require-user-connection';
 import useAnalytics from '../../hooks/use-analytics';
+import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
 import cloud from './cloud.svg';
 import emptyAvatar from './empty-avatar.svg';
 import jetpackGray from './jetpack-gray.svg';
@@ -173,13 +170,8 @@ const ConnectionStatusCard: ConnectionStatusCardType = ( {
 	context,
 	onConnectUser = null,
 } ) => {
-	const { isRegistered, isUserConnected, userConnectionData } = useConnection( {
-		apiRoot,
-		apiNonce,
+	const { isRegistered, isUserConnected, userConnectionData } = useMyJetpackConnection( {
 		redirectUri,
-		skipUserConnection: false,
-		autoTrigger: false,
-		from: 'my-jetpack',
 	} );
 
 	const { recordEvent } = useAnalytics();

projects/packages/my-jetpack/_inc/components/product-card/index.tsx

@@ -8,9 +8,11 @@ import Card from '../card';
 import ActionButton from './action-button';
 import PriceComponent from './pricing-component';
 import RecommendationActions from './recommendation-actions';
-import SecondaryButton, { type SecondaryButtonProps } from './secondary-button';
+import SecondaryButton from './secondary-button';
 import Status from './status';
 import styles from './style.module.scss';
+import type { AdditionalAction, SecondaryAction } from './types';
+import type { InstallCallback } from '../../data/products/use-install-standalone-plugin';
 import type { FC, MouseEventHandler, ReactNode } from 'react';
 
 export type ProductCardProps = {
@@ -25,13 +27,13 @@ export type ProductCardProps = {
 	isManageDisabled?: boolean;
 	onActivate?: () => void;
 	slug: JetpackModule;
-	additionalActions?: SecondaryButtonProps[];
+	additionalActions?: AdditionalAction[];
 	upgradeInInterstitial?: boolean;
-	primaryActionOverride?: Record< string, { href?: string; label?: string } >;
-	secondaryAction?: Record< string, SecondaryButtonProps & { positionFirst?: boolean } >;
-	onInstallStandalone?: () => void;
+	primaryActionOverride?: AdditionalAction;
+	secondaryAction?: SecondaryAction;
+	onInstallStandalone?: InstallCallback;
 	onActivateStandalone?: () => void;
-	status: keyof typeof PRODUCT_STATUSES;
+	status: ProductStatus;
 	onMouseEnter?: MouseEventHandler< HTMLButtonElement >;
 	onMouseLeave?: MouseEventHandler< HTMLButtonElement >;
 };
@@ -135,7 +137,7 @@ const ProductCard: FC< ProductCardProps > = props => {
 		recordEvent( 'jetpack_myjetpack_product_card_install_standalone_plugin_click', {
 			product: slug,
 		} );
-		onInstallStandalone();
+		onInstallStandalone( {} );
 	}, [ slug, onInstallStandalone, recordEvent ] );
 
 	/**

projects/packages/my-jetpack/_inc/components/product-card/status.tsx

@@ -6,13 +6,13 @@ import styles from './style.module.scss';
 import type { FC } from 'react';
 
 interface StatusProps {
-	status: keyof typeof PRODUCT_STATUSES;
+	status: ProductStatus;
 	isFetching: boolean;
 	isInstallingStandalone: boolean;
 	isOwned: boolean;
 }
 
-type StatusStateFunction = ( status: keyof typeof PRODUCT_STATUSES, isOwned: boolean ) => string;
+type StatusStateFunction = ( status: ProductStatus, isOwned: boolean ) => string;
 
 const getStatusLabel: StatusStateFunction = ( status, isOwned ) => {
 	switch ( status ) {

projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx

@@ -9,7 +9,6 @@ import {
 	Text,
 	TermsOfService,
 } from '@automattic/jetpack-components';
-import { useConnection } from '@automattic/jetpack-connection';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
@@ -23,6 +22,7 @@ import useProduct from '../../data/products/use-product';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import useAnalytics from '../../hooks/use-analytics';
 import { useGoBack } from '../../hooks/use-go-back';
+import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
 import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate';
 import GoBackLink from '../go-back-link';
 import ProductDetailCard from '../product-detail-card';
@@ -80,9 +80,9 @@ export default function ProductInterstitial( {
 	const { recordEvent } = useAnalytics();
 	const { onClickGoBack } = useGoBack( { slug } );
 	const { myJetpackCheckoutUri = '' } = getMyJetpackWindowInitialState();
-	const { siteIsRegistering, handleRegisterSite } = useConnection( {
+	const { siteIsRegistering, handleRegisterSite } = useMyJetpackConnection( {
 		skipUserConnection: true,
-		redirectUri: detail.postActivationUrl ? detail.postActivationUrl : null,
+		redirectUri: detail.postActivationUrl ?? null,
 	} );
 	const showBundledTOS = ! hideTOS && !! bundle;
 	const productName = detail?.title;

projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/index.jsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { useConnection } from '@automattic/jetpack-connection';
 import debugFactory from 'debug';
 import { useCallback } from 'react';
 /**
  * Internal dependencies
  */
 import ProductInterstitial from '../';
 import useProduct from '../../../data/products/use-product';
+import useMyJetpackConnection from '../../../hooks/use-my-jetpack-connection';
 import jetpackAiImage from '../jetpack-ai.png';
 import styles from './style.module.scss';
 
@@ -23,7 +23,7 @@ export default function JetpackAiInterstitial() {
 	const { detail } = useProduct( slug );
 	debug( detail );
 
-	const { userConnectionData } = useConnection();
+	const { userConnectionData } = useMyJetpackConnection();
 	const { currentUser } = userConnectionData;
 	const { wpcomUser } = currentUser;
 	const userId = currentUser?.id || 0;

projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx

@@ -10,7 +10,6 @@ import {
 	getRedirectUrl,
 	Notice,
 } from '@automattic/jetpack-components';
-import { useConnection } from '@automattic/jetpack-connection';
 import { Button, Card, ExternalLink } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, plus, help, check } from '@wordpress/icons';
@@ -23,6 +22,7 @@ import { useCallback, useState, useEffect } from 'react';
 import useProduct from '../../../data/products/use-product';
 import useAnalytics from '../../../hooks/use-analytics';
 import { useGoBack } from '../../../hooks/use-go-back';
+import useMyJetpackConnection from '../../../hooks/use-my-jetpack-connection';
 import useMyJetpackNavigate from '../../../hooks/use-my-jetpack-navigate';
 import GoBackLink from '../../go-back-link';
 import styles from './style.module.scss';
@@ -38,7 +38,7 @@ export default function () {
 	const { detail } = useProduct( 'jetpack-ai' );
 	const { description, aiAssistantFeature } = detail;
 	const [ showNotice, setShowNotice ] = useState( false );
-	const { isRegistered } = useConnection();
+	const { isRegistered } = useMyJetpackConnection();
 
 	const videoTitleContentGeneration = __(
 		'Generate and edit content faster with Jetpack AI Assistant',

projects/packages/my-jetpack/_inc/components/redeem-token-screen/index.jsx

@@ -1,9 +1,8 @@
-import { useConnection } from '@automattic/jetpack-connection';
 import { GoldenTokenModal } from '@automattic/jetpack-licensing';
 import { __ } from '@wordpress/i18n';
-import React from 'react';
 import { QUERY_PURCHASES_KEY, REST_API_SITE_PURCHASES_ENDPOINT } from '../../data/constants';
 import useSimpleQuery from '../../data/use-simple-query';
+import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
 import { includesLifetimePurchase } from '../../utils/is-lifetime-purchase';
 
 /**
@@ -12,7 +11,7 @@ import { includesLifetimePurchase } from '../../utils/is-lifetime-purchase';
  * @returns {object} The RedeemTokenScreen component.
  */
 export default function RedeemTokenScreen() {
-	const { userConnectionData } = useConnection();
+	const { userConnectionData } = useMyJetpackConnection();
 	// They might not have a display name set in wpcom, so fall back to wpcom login or local username.
 	const displayName =
 		userConnectionData?.currentUser?.wpcomUser?.display_name ||

projects/packages/my-jetpack/_inc/components/welcome-banner/index.jsx

@@ -1,11 +1,11 @@
 import { Container, Col, Button, Text } from '@automattic/jetpack-components';
-import { useConnection } from '@automattic/jetpack-connection';
 import { __ } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 import { useEffect, useCallback, useState } from 'react';
 import { MyJetpackRoutes } from '../../constants';
 import useWelcomeBanner from '../../data/welcome-banner/use-welcome-banner';
 import useAnalytics from '../../hooks/use-analytics';
+import useMyJetpackConnection from '../../hooks/use-my-jetpack-connection';
 import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate';
 import { CardWrapper } from '../card';
 import styles from './style.module.scss';
@@ -18,7 +18,7 @@ import styles from './style.module.scss';
 const WelcomeBanner = () => {
 	const { recordEvent } = useAnalytics();
 	const { isWelcomeBannerVisible, dismissWelcomeBanner } = useWelcomeBanner();
-	const { isRegistered, isUserConnected } = useConnection();
+	const { isRegistered, isUserConnected } = useMyJetpackConnection();
 	const navigateToConnectionPage = useMyJetpackNavigate( MyJetpackRoutes.Connection );
 	const [ bannerVisible, setBannerVisible ] = useState( isWelcomeBannerVisible );
 	const shouldDisplayConnectionButton = ! isRegistered || ! isUserConnected;

projects/packages/my-jetpack/_inc/data/products/use-install-standalone-plugin.ts

@@ -3,8 +3,22 @@ import { REST_API_SITE_PRODUCTS_ENDPOINT } from '../constants';
 import { QUERY_INSTALL_PRODUCT_KEY } from '../constants';
 import useSimpleMutation from '../use-simple-mutation';
 import useProduct from './use-product';
+import type { APIFetchOptionsWithQueryParams } from '../use-simple-mutation';
+import type { UseMutateFunction } from '@tanstack/react-query';
 
-const useInstallStandalonePlugin = ( productId: string ) => {
+export type InstallCallback = UseMutateFunction<
+	void,
+	Error,
+	APIFetchOptionsWithQueryParams,
+	unknown
+>;
+
+type UseInstallStandalonePluginFunction = ( productId: string ) => {
+	install: InstallCallback;
+	isPending: boolean;
+};
+
+const useInstallStandalonePlugin: UseInstallStandalonePluginFunction = productId => {
 	const { detail, refetch } = useProduct( productId );
 
 	const { mutate: install, isPending } = useSimpleMutation( {

projects/packages/my-jetpack/_inc/data/use-simple-mutation.ts

@@ -5,7 +5,7 @@ import { useFetchingErrorNotice } from './notices/use-fetching-error-notice';
 import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
 import type { APIFetchOptions } from '@wordpress/api-fetch';
 
-type APIFetchOptionsWithQueryParams = APIFetchOptions & {
+export type APIFetchOptionsWithQueryParams = APIFetchOptions & {
 	queryParams?: Record< string, string | Array< string > | object >;
 };
 

projects/packages/my-jetpack/changelog/update-use-connection-to-use-my-jetpack-connection-hook

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Update uses of useConnection to useMyJetpackConnection and improve typing in a few places

projects/packages/my-jetpack/global.d.ts

@@ -9,6 +9,20 @@ declare module '@wordpress/components';
 declare module '@wordpress/compose';
 declare module '@wordpress/icons';
 declare module '@automattic/jetpack-connection';
+declare module '@wordpress/url';
+
+type ProductStatus =
+	| 'active'
+	| 'inactive'
+	| 'module_disabled'
+	| 'site_connection_error'
+	| 'plugin_absent'
+	| 'plugin_absent_with_plan'
+	| 'needs_plan'
+	| 'needs_activation'
+	| 'needs_first_site_connection'
+	| 'user_connection_error'
+	| 'can_upgrade';
 
 type JetpackModule =
 	| 'anti-spam'
@@ -186,7 +200,7 @@ interface Window {
 						is_standalone_installed: boolean;
 						is_standalone_active: boolean;
 					};
-					status: string;
+					status: ProductStatus;
 					supported_products: string[];
 					tiers: string[];
 					title: string;

projects/packages/my-jetpack/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-my-jetpack",
-	"version": "4.32.0",
+	"version": "4.32.1-alpha",
 	"description": "WP Admin page with information and configuration shared among all Jetpack stand-alone plugins",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/my-jetpack/#readme",
 	"bugs": {

projects/packages/my-jetpack/src/class-initializer.php

@@ -41,7 +41,7 @@ class Initializer {
 	 *
 	 * @var string
 	 */
-	const PACKAGE_VERSION = '4.32.0';
+	const PACKAGE_VERSION = '4.32.1-alpha';
 
 	/**
 	 * HTML container ID for the IDC screen on My Jetpack page.