From b3b74e7ba426a6b672d3e2916685197f558bd96b Mon Sep 17 00:00:00 2001
From: Dylan Munson <65001528+CodeyGuyDylan@users.noreply.github.com>
Date: Tue, 12 Mar 2024 11:05:18 -0600
Subject: [PATCH] Update/rewrite use my jetpack connection hook to typescript
 (#36300)

* Update useMyJetpackConnection hook to typescript

* changelog

* Return empty object instead of null

* Update other uses of null to object
---
 projects/packages/my-jetpack/_inc/admin.jsx   |  4 +-
 .../components/add-license-screen/index.jsx   |  4 +-
 .../components/my-jetpack-screen/index.jsx    | 10 ++--
 .../_inc/components/plans-section/index.jsx   |  6 +--
 .../backup-card/index.jsx                     |  4 +-
 .../boost-card/boost-speed-score.tsx          |  4 +-
 .../product-cards-section/index.jsx           |  6 +--
 .../product-cards-section/videopress-card.jsx |  3 +-
 .../components/product-detail-card/index.jsx  |  4 +-
 .../components/product-detail-table/index.jsx |  6 +--
 .../components/product-interstitial/index.jsx |  4 +-
 .../_inc/components/stats-section/index.jsx   |  4 +-
 .../_inc/components/welcome-banner/index.jsx  |  4 +-
 .../_inc/data/products/use-product.ts         |  4 +-
 .../_inc/data/use-jetpack-api-query.ts        |  5 +-
 .../data/utils/get-my-jetpack-window-state.ts | 38 +++++++++++----
 .../data/welcome-banner/use-welcome-banner.ts |  4 +-
 .../_inc/hooks/use-analytics/index.js         |  4 +-
 .../hooks/use-my-jetpack-connection/index.js  | 29 ------------
 .../hooks/use-my-jetpack-connection/index.ts  | 46 +++++++++++++++++++
 .../_inc/utils/get-manage-your-plan-url.ts    |  4 +-
 .../_inc/utils/get-purchase-plan-url.ts       |  4 +-
 ...e-my-jetpack-connection-hook-to-typescript |  4 ++
 23 files changed, 123 insertions(+), 82 deletions(-)
 delete mode 100644 projects/packages/my-jetpack/_inc/hooks/use-my-jetpack-connection/index.js
 create mode 100644 projects/packages/my-jetpack/_inc/hooks/use-my-jetpack-connection/index.ts
 create mode 100644 projects/packages/my-jetpack/changelog/update-rewrite-use-my-jetpack-connection-hook-to-typescript

diff --git a/projects/packages/my-jetpack/_inc/admin.jsx b/projects/packages/my-jetpack/_inc/admin.jsx
index dd290eab4c4f6..5ec699fd74264 100644
--- a/projects/packages/my-jetpack/_inc/admin.jsx
+++ b/projects/packages/my-jetpack/_inc/admin.jsx
@@ -30,7 +30,7 @@ import {
 import RedeemTokenScreen from './components/redeem-token-screen';
 import NoticeContextProvider from './context/notices/noticeContext';
 import './style.module.scss';
-import getMyJetpackWindowState from './data/utils/get-my-jetpack-window-state';
+import { getMyJetpackWindowInitialState } from './data/utils/get-my-jetpack-window-state';
 
 /**
  * Component to scroll window to top on route change.
@@ -46,7 +46,7 @@ function ScrollToTop() {
 
 const MyJetpack = () => {
 	const queryClient = new QueryClient();
-	const { loadAddLicenseScreen } = getMyJetpackWindowState();
+	const { loadAddLicenseScreen } = getMyJetpackWindowInitialState();
 
 	return (
 		<ThemeProvider>
diff --git a/projects/packages/my-jetpack/_inc/components/add-license-screen/index.jsx b/projects/packages/my-jetpack/_inc/components/add-license-screen/index.jsx
index a6f645dbf15c9..f646d29e6dc04 100644
--- a/projects/packages/my-jetpack/_inc/components/add-license-screen/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/add-license-screen/index.jsx
@@ -10,7 +10,7 @@ import React, { useCallback, useState, useMemo } from 'react';
  */
 import { QUERY_LICENSES_KEY } from '../../data/constants';
 import useJetpackApiQuery from '../../data/use-jetpack-api-query';
-import getMyJetpackWindowState from '../../data/utils/get-my-jetpack-window-state';
+import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import useAnalytics from '../../hooks/use-analytics';
 import GoBackLink from '../go-back-link';
 
@@ -50,7 +50,7 @@ export default function AddLicenseScreen() {
 		[ licenses ]
 	);
 
-	const { siteSuffix = '', adminUrl = '' } = getMyJetpackWindowState();
+	const { siteSuffix = '', adminUrl = '' } = getMyJetpackWindowInitialState();
 
 	return (
 		<AdminPage showHeader={ false } showBackground={ false }>
diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx
index bb50488089426..fd17496e9af60 100644
--- a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx
@@ -29,7 +29,7 @@ import {
 } from '../../data/constants';
 import useProduct from '../../data/products/use-product';
 import useSimpleQuery from '../../data/use-simple-query';
-import getMyJetpackWindowState from '../../data/utils/get-my-jetpack-window-state';
+import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import useAnalytics from '../../hooks/use-analytics';
 import useConnectionWatcher from '../../hooks/use-connection-watcher';
 import ConnectionsSection from '../connections-section';
@@ -94,9 +94,9 @@ const GlobalNotice = ( { message, options } ) => {
  */
 export default function MyJetpackScreen() {
 	useConnectionWatcher();
-	const { hasBeenDismissed = false } = getMyJetpackWindowState( 'welcomeBanner' );
-	const { showFullJetpackStatsCard = false } = getMyJetpackWindowState( 'myJetpackFlags' );
-	const { jetpackManage = {}, adminUrl } = getMyJetpackWindowState();
+	const { hasBeenDismissed = false } = getMyJetpackWindowInitialState( 'welcomeBanner' );
+	const { showFullJetpackStatsCard = false } = getMyJetpackWindowInitialState( 'myJetpackFlags' );
+	const { jetpackManage = {}, adminUrl } = getMyJetpackWindowInitialState();
 
 	const { currentNotice } = useContext( NoticeContext );
 	const { message, options } = currentNotice || {};
@@ -116,7 +116,7 @@ export default function MyJetpackScreen() {
 
 	const shouldShowZendeskChatWidget =
 		! isJwtLoading && ! isChatAvailabilityLoading && isAvailable && jwt;
-	const isNewUser = getMyJetpackWindowState( 'userIsNewToJetpack' ) === '1';
+	const isNewUser = getMyJetpackWindowInitialState( 'userIsNewToJetpack' ) === '1';
 
 	const { recordEvent } = useAnalytics();
 	const [ reloading, setReloading ] = useState( false );
diff --git a/projects/packages/my-jetpack/_inc/components/plans-section/index.jsx b/projects/packages/my-jetpack/_inc/components/plans-section/index.jsx
index 69f61590000b4..3e0b91a2ba2e3 100644
--- a/projects/packages/my-jetpack/_inc/components/plans-section/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/plans-section/index.jsx
@@ -3,7 +3,7 @@ import { __, _n } from '@wordpress/i18n';
 import { useCallback } from 'react';
 import { QUERY_PURCHASES_KEY, REST_API_SITE_PURCHASES_ENDPOINT } from '../../data/constants';
 import useSimpleQuery from '../../data/use-simple-query';
-import getMyJetpackWindowState from '../../data/utils/get-my-jetpack-window-state';
+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 useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate';
@@ -123,7 +123,7 @@ function PlanSectionFooter( { numberOfPurchases } ) {
 		);
 	}
 
-	const { loadAddLicenseScreen = '', adminUrl = '' } = getMyJetpackWindowState();
+	const { loadAddLicenseScreen = '', adminUrl = '' } = getMyJetpackWindowInitialState();
 
 	return (
 		<ul>
@@ -162,7 +162,7 @@ function PlanSectionFooter( { numberOfPurchases } ) {
  * @returns {object} PlansSection React component.
  */
 export default function PlansSection() {
-	const userIsAdmin = !! getMyJetpackWindowState( 'userIsAdmin' );
+	const userIsAdmin = !! getMyJetpackWindowInitialState( 'userIsAdmin' );
 	const {
 		data: purchases,
 		isLoading,
diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx
index 3fa40dd443e86..609056ed194c0 100644
--- a/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/backup-card/index.jsx
@@ -13,7 +13,7 @@ import {
 } from '../../../data/constants';
 import useProduct from '../../../data/products/use-product';
 import useSimpleQuery from '../../../data/use-simple-query';
-import getMyJetpackWindowState from '../../../data/utils/get-my-jetpack-window-state';
+import { getMyJetpackWindowInitialState } from '../../../data/utils/get-my-jetpack-window-state';
 import useAnalytics from '../../../hooks/use-analytics';
 import ProductCard from '../../connected-product-card';
 import { PRODUCT_STATUSES } from '../../product-card/action-button';
@@ -145,7 +145,7 @@ const WithBackupsValueSection = ( { admin, slug } ) => {
 	const lastRewindableEventTime = lastRewindableEvent?.published;
 	const undoBackupId = data?.undo_backup_id;
 	const { recordEvent } = useAnalytics();
-	const { siteSuffix = '' } = getMyJetpackWindowState();
+	const { siteSuffix = '' } = getMyJetpackWindowInitialState();
 
 	const handleUndoClick = () => {
 		recordEvent( 'jetpack_myjetpack_backup_card_undo_click', {
diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/boost-card/boost-speed-score.tsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/boost-card/boost-speed-score.tsx
index cf02996f963da..d396706a8cb0f 100644
--- a/projects/packages/my-jetpack/_inc/components/product-cards-section/boost-card/boost-speed-score.tsx
+++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/boost-card/boost-speed-score.tsx
@@ -8,7 +8,7 @@ import { Popover } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import React, { useCallback, useEffect, useState } from 'react';
-import getMyJetpackWindowState from '../../../data/utils/get-my-jetpack-window-state';
+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 { useBoostTooltipCopy } from './use-boost-tooltip-copy';
@@ -25,7 +25,7 @@ const BoostSpeedScore: FC = () => {
 	const [ isTooltipVisible, setIsTooltipVisible ] = useState( false );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
-	const { siteSuffix: siteUrl = '', latestBoostSpeedScores } = getMyJetpackWindowState();
+	const { siteSuffix: siteUrl = '', latestBoostSpeedScores } = getMyJetpackWindowInitialState();
 	const { apiRoot, apiNonce, isSiteConnected } = useMyJetpackConnection();
 
 	const getAverageSpeedScore = ( mobileScore, desktopScore ) => {
diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/index.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/index.jsx
index 0f8ca14a15db9..5757d718aa3d3 100644
--- a/projects/packages/my-jetpack/_inc/components/product-cards-section/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/index.jsx
@@ -1,6 +1,6 @@
 import { Container, Col } from '@automattic/jetpack-components';
 import React from 'react';
-import getMyJetpackWindowState from '../../data/utils/get-my-jetpack-window-state';
+import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import AiCard from './ai-card';
 import AntiSpamCard from './anti-spam-card';
 import BackupCard from './backup-card';
@@ -20,8 +20,8 @@ import VideopressCard from './videopress-card';
  * @returns {object} ProductCardsSection React component.
  */
 const ProductCardsSection = () => {
-	const { isAtomic = false, userIsAdmin = false } = getMyJetpackWindowState();
-	const { showFullJetpackStatsCard = false } = getMyJetpackWindowState( 'myJetpackFlags' );
+	const { isAtomic = false, userIsAdmin = false } = getMyJetpackWindowInitialState();
+	const { showFullJetpackStatsCard = false } = getMyJetpackWindowInitialState( 'myJetpackFlags' );
 
 	const items = {
 		backups: BackupCard,
diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card.jsx
index 16ea18c9945ba..fed8769dcdd99 100644
--- a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card.jsx
@@ -9,6 +9,7 @@ import {
 	QUERY_VIDEOPRESS_STATS_KEY,
 } from '../../data/constants';
 import useSimpleQuery from '../../data/use-simple-query';
+import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 /**
  * Internal dependencies
  */
@@ -54,7 +55,7 @@ const useVideoPressStats = () => {
 };
 
 const VideopressCard = ( { admin } ) => {
-	const { videoPressStats = false } = window.myJetpackInitialState?.myJetpackFlags ?? {};
+	const { videoPressStats = false } = getMyJetpackWindowInitialState( 'myJetpackFlags' );
 	const { loading, hasError, change, currentFormatted, changePercentage } = useVideoPressStats();
 
 	if ( ! videoPressStats || hasError ) {
diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
index 9c77831464ee4..267f7e42ca36b 100644
--- a/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
@@ -15,7 +15,7 @@ import { Icon, check, plus } from '@wordpress/icons';
 import classnames from 'classnames';
 import React, { useCallback } from 'react';
 import useProduct from '../../data/products/use-product';
-import getMyJetpackWindowState from '../../data/utils/get-my-jetpack-window-state';
+import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import useAnalytics from '../../hooks/use-analytics';
 import { useRedirectToReferrer } from '../../hooks/use-redirect-to-referrer';
 import ProductDetailButton from '../product-detail-button';
@@ -89,7 +89,7 @@ const ProductDetailCard = ( {
 		siteSuffix = '',
 		adminUrl = '',
 		myJetpackCheckoutUri = '',
-	} = getMyJetpackWindowState();
+	} = getMyJetpackWindowInitialState();
 
 	const { detail } = useProduct( slug );
 
diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-table/index.jsx b/projects/packages/my-jetpack/_inc/components/product-detail-table/index.jsx
index 8ad4abda00066..a85d25bea0c10 100644
--- a/projects/packages/my-jetpack/_inc/components/product-detail-table/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-detail-table/index.jsx
@@ -13,7 +13,7 @@ import { sprintf, __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import { useCallback, useMemo } from 'react';
 import useProduct from '../../data/products/use-product';
-import getMyJetpackWindowState from '../../data/utils/get-my-jetpack-window-state';
+import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import { useRedirectToReferrer } from '../../hooks/use-redirect-to-referrer';
 
 /**
@@ -38,7 +38,7 @@ const ProductDetailTableColumn = ( {
 	tier,
 	trackProductButtonClick,
 } ) => {
-	const { siteSuffix = '', myJetpackCheckoutUri = '' } = getMyJetpackWindowState();
+	const { siteSuffix = '', myJetpackCheckoutUri = '' } = getMyJetpackWindowInitialState();
 
 	// Extract the product details.
 	const {
@@ -220,7 +220,7 @@ const ProductDetailTable = ( {
 	trackProductButtonClick,
 	isFetching,
 } ) => {
-	const { fileSystemWriteAccess = 'no' } = getMyJetpackWindowState();
+	const { fileSystemWriteAccess = 'no' } = getMyJetpackWindowInitialState();
 
 	const { detail } = useProduct( slug );
 	const { description, featuresByTier = [], pluginSlug, status, tiers = [], title } = detail;
diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx b/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx
index e1df824ddb6d5..7232e033119fd 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/index.jsx
@@ -11,7 +11,7 @@ import React, { useCallback, useEffect } from 'react';
  */
 import useActivate from '../../data/products/use-activate';
 import useProduct from '../../data/products/use-product';
-import getMyJetpackWindowState from '../../data/utils/get-my-jetpack-window-state';
+import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import useAnalytics from '../../hooks/use-analytics';
 import { useGoBack } from '../../hooks/use-go-back';
 import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate';
@@ -67,7 +67,7 @@ export default function ProductInterstitial( {
 	const { isUpgradableByBundle, tiers, pricingForUi } = detail;
 	const { recordEvent } = useAnalytics();
 	const { onClickGoBack } = useGoBack( { slug } );
-	const { myJetpackCheckoutUri = '' } = getMyJetpackWindowState();
+	const { myJetpackCheckoutUri = '' } = getMyJetpackWindowInitialState();
 
 	useEffect( () => {
 		recordEvent( 'jetpack_myjetpack_product_interstitial_view', { product: slug } );
diff --git a/projects/packages/my-jetpack/_inc/components/stats-section/index.jsx b/projects/packages/my-jetpack/_inc/components/stats-section/index.jsx
index ce639cc665838..0a888a43897ac 100644
--- a/projects/packages/my-jetpack/_inc/components/stats-section/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/stats-section/index.jsx
@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { QUERY_STATS_COUNTS_KEY, getStatsHighlightsEndpoint } from '../../data/constants';
 import useProduct from '../../data/products/use-product';
 import useSimpleQuery from '../../data/use-simple-query';
-import getMyJetpackWindowState from '../../data/utils/get-my-jetpack-window-state';
+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 ProductCard from '../connected-product-card';
@@ -15,7 +15,7 @@ const StatsSection = () => {
 	const { blogID } = useMyJetpackConnection();
 	const { detail } = useProduct( slug );
 	const { status } = detail;
-	const isAdmin = !! getMyJetpackWindowState( 'userIsAdmin' );
+	const isAdmin = !! getMyJetpackWindowInitialState( 'userIsAdmin' );
 	const { data: statsCounts } = useSimpleQuery( {
 		name: QUERY_STATS_COUNTS_KEY,
 		query: {
diff --git a/projects/packages/my-jetpack/_inc/components/welcome-banner/index.jsx b/projects/packages/my-jetpack/_inc/components/welcome-banner/index.jsx
index 64d6edc68be53..7dcd7cc0fbd68 100644
--- a/projects/packages/my-jetpack/_inc/components/welcome-banner/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/welcome-banner/index.jsx
@@ -3,7 +3,7 @@ import { useConnection } from '@automattic/jetpack-connection';
 import { __ } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 import { useEffect, useCallback, useState } from 'react';
-import getMyJetpackWindowState from '../../data/utils/get-my-jetpack-window-state';
+import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import useWelcomeBanner from '../../data/welcome-banner/use-welcome-banner';
 import useAnalytics from '../../hooks/use-analytics';
 import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate';
@@ -16,7 +16,7 @@ import styles from './style.module.scss';
  * @returns {object} The WelcomeBanner component.
  */
 const WelcomeBanner = () => {
-	const isNewUser = getMyJetpackWindowState( 'userIsNewToJetpack' ) === '1';
+	const isNewUser = getMyJetpackWindowInitialState( 'userIsNewToJetpack' ) === '1';
 	const { recordEvent } = useAnalytics();
 	const { isDismissed, dismissWelcomeBanner } = useWelcomeBanner();
 	const { isRegistered, isUserConnected } = useConnection();
diff --git a/projects/packages/my-jetpack/_inc/data/products/use-product.ts b/projects/packages/my-jetpack/_inc/data/products/use-product.ts
index 3379268071515..d39732c2db0b8 100644
--- a/projects/packages/my-jetpack/_inc/data/products/use-product.ts
+++ b/projects/packages/my-jetpack/_inc/data/products/use-product.ts
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { REST_API_SITE_PRODUCTS_ENDPOINT } from '../constants';
 import { QUERY_PRODUCT_KEY } from '../constants';
 import useSimpleQuery from '../use-simple-query';
-import getMyJetpackWindowState from '../utils/get-my-jetpack-window-state';
+import { getMyJetpackWindowInitialState } from '../utils/get-my-jetpack-window-state';
 import mapObjectKeysToCamel from '../utils/to-camel';
 import type { ProductCamelCase, ProductSnakeCase, WP_Error } from '../types';
 import type { RefetchOptions, QueryObserverResult } from '@tanstack/react-query';
@@ -20,7 +20,7 @@ const getDiscountPricePerMonth = ( product: ProductCamelCase ) => {
 };
 
 export const useAllProducts = () => {
-	const { items: products } = getMyJetpackWindowState( 'products' );
+	const { items: products } = getMyJetpackWindowInitialState( 'products' );
 
 	return products;
 };
diff --git a/projects/packages/my-jetpack/_inc/data/use-jetpack-api-query.ts b/projects/packages/my-jetpack/_inc/data/use-jetpack-api-query.ts
index e901c4d4cb147..afb9b2d8428da 100644
--- a/projects/packages/my-jetpack/_inc/data/use-jetpack-api-query.ts
+++ b/projects/packages/my-jetpack/_inc/data/use-jetpack-api-query.ts
@@ -1,7 +1,7 @@
 import restApi from '@automattic/jetpack-api';
 import { useQuery } from '@tanstack/react-query';
 import { useFetchingErrorNotice } from './notices/use-fetching-error-notice';
-import type { UseQueryResult } from '@tanstack/react-query';
+import { getMyJetpackWindowRestState } from './utils/get-my-jetpack-window-state';
 
 /**
  * Custom hook for fetching data from the Jetpack API, utilizing the react-query library for data fetching and caching.
@@ -13,7 +13,6 @@ import type { UseQueryResult } from '@tanstack/react-query';
  * @param {string} params.name - The unique name for the query. This name, along with the optional `explicitKey`, forms the cache key for the query's result.
  * @param {Function} params.queryFn - The function to fetch data from the API. It receives a configured instance of `restApi` and must return a promise that resolves to the data of type `T`.
  * @param {string} [params.errorMessage] - Optional. A custom error message to be displayed in case the query fails. This message overrides the default error handling behavior.
- * @returns {UseQueryResult<T>} The result object from the useQuery hook, containing data and state information about the query (e.g., isLoading, isError).
  */
 type QueryParams< T > = {
 	name: string;
@@ -24,7 +23,7 @@ const useJetpackApiQuery = < T >( { name, queryFn, errorMessage }: QueryParams<
 	const queryResult = useQuery( {
 		queryKey: [ name ],
 		queryFn: () => {
-			const { apiRoot, apiNonce } = window?.myJetpackRest || {};
+			const { apiRoot, apiNonce } = getMyJetpackWindowRestState();
 			restApi.setApiRoot( apiRoot );
 			restApi.setApiNonce( apiNonce );
 			return queryFn( restApi );
diff --git a/projects/packages/my-jetpack/_inc/data/utils/get-my-jetpack-window-state.ts b/projects/packages/my-jetpack/_inc/data/utils/get-my-jetpack-window-state.ts
index 54bdfd3e82cb2..e0479dab0d64f 100644
--- a/projects/packages/my-jetpack/_inc/data/utils/get-my-jetpack-window-state.ts
+++ b/projects/packages/my-jetpack/_inc/data/utils/get-my-jetpack-window-state.ts
@@ -1,17 +1,37 @@
-type MyJetpackState = Window[ 'myJetpackInitialState' ];
+type InitialState = Window[ 'myJetpackInitialState' ];
+type RestState = Window[ 'myJetpackRest' ];
+type ConnectionState = Window[ 'JP_CONNECTION_INITIAL_STATE' ];
 
-type ReturnType< A > = A extends undefined
-	? MyJetpackState
-	: MyJetpackState[ A extends keyof MyJetpackState ? A : never ];
+// Handles typing based on whether or not a key is provided. S = type of state, A = type of key
+type StateReturnType< S, A > = A extends undefined ? S : S[ A extends keyof S ? A : never ];
 
-const getMyJetpackWindowState = < A extends keyof MyJetpackState | undefined = undefined >(
+export const getMyJetpackWindowInitialState = <
+	A extends keyof InitialState | undefined = undefined,
+>(
 	key?: A
-): ReturnType< A > => {
+): StateReturnType< InitialState, A > => {
 	if ( ! key ) {
-		return window?.myJetpackInitialState as ReturnType< A >;
+		return window?.myJetpackInitialState as StateReturnType< InitialState, A >;
 	}
 
-	return ( window?.myJetpackInitialState?.[ key ] ?? null ) as ReturnType< A >;
+	return ( window?.myJetpackInitialState?.[ key ] ?? {} ) as StateReturnType< InitialState, A >;
 };
 
-export default getMyJetpackWindowState;
+export const getMyJetpackWindowRestState = () => {
+	return ( window?.myJetpackRest ?? {} ) as RestState;
+};
+
+export const getMyJetpackWindowConnectionState = <
+	A extends keyof ConnectionState | undefined = undefined,
+>(
+	key?: A
+): StateReturnType< ConnectionState, A > => {
+	if ( ! key ) {
+		return window?.JP_CONNECTION_INITIAL_STATE as StateReturnType< ConnectionState, A >;
+	}
+
+	return ( window?.JP_CONNECTION_INITIAL_STATE?.[ key ] ?? {} ) as StateReturnType<
+		ConnectionState,
+		A
+	>;
+};
diff --git a/projects/packages/my-jetpack/_inc/data/welcome-banner/use-welcome-banner.ts b/projects/packages/my-jetpack/_inc/data/welcome-banner/use-welcome-banner.ts
index 58bc4a5cd6c84..ade7c3e543095 100644
--- a/projects/packages/my-jetpack/_inc/data/welcome-banner/use-welcome-banner.ts
+++ b/projects/packages/my-jetpack/_inc/data/welcome-banner/use-welcome-banner.ts
@@ -5,11 +5,11 @@ import {
 	REST_API_SITE_DISMISS_BANNER,
 } from '../../data/constants';
 import useSimpleMutation from '../use-simple-mutation';
-import getMyJetpackWindowState from '../utils/get-my-jetpack-window-state';
+import { getMyJetpackWindowInitialState } from '../utils/get-my-jetpack-window-state';
 
 const useWelcomeBanner = () => {
 	const { hasBeenDismissed: welcomeBannerHasBeenDismissed } =
-		getMyJetpackWindowState( 'welcomeBanner' );
+		getMyJetpackWindowInitialState( 'welcomeBanner' );
 
 	const [ isDismissed, setIsDismissed ] = useState( welcomeBannerHasBeenDismissed );
 
diff --git a/projects/packages/my-jetpack/_inc/hooks/use-analytics/index.js b/projects/packages/my-jetpack/_inc/hooks/use-analytics/index.js
index 4018e2fb49e2f..403697403a231 100644
--- a/projects/packages/my-jetpack/_inc/hooks/use-analytics/index.js
+++ b/projects/packages/my-jetpack/_inc/hooks/use-analytics/index.js
@@ -1,12 +1,12 @@
 import jetpackAnalytics from '@automattic/jetpack-analytics';
 import { useCallback, useEffect } from 'react';
-import getMyJetpackWindowState from '../../data/utils/get-my-jetpack-window-state';
+import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import useMyJetpackConnection from '../use-my-jetpack-connection';
 
 const useAnalytics = () => {
 	const { isUserConnected, connectedPlugins, userConnectionData = {} } = useMyJetpackConnection();
 	const { login, ID } = userConnectionData.currentUser?.wpcomUser || {};
-	const { myJetpackVersion = '' } = getMyJetpackWindowState();
+	const { myJetpackVersion = '' } = getMyJetpackWindowInitialState();
 
 	/**
 	 * Initialize tracks with user data.
diff --git a/projects/packages/my-jetpack/_inc/hooks/use-my-jetpack-connection/index.js b/projects/packages/my-jetpack/_inc/hooks/use-my-jetpack-connection/index.js
deleted file mode 100644
index 0af7c6ba289ed..0000000000000
--- a/projects/packages/my-jetpack/_inc/hooks/use-my-jetpack-connection/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/* global myJetpackInitialState */
-/* global myJetpackRest */
-/* global JP_CONNECTION_INITIAL_STATE */
-import { useConnection } from '@automattic/jetpack-connection';
-
-/**
- * React custom hook to get the site purchases data.
- *
- * @returns {object} site purchases data
- */
-export default function useMyJetpackConnection() {
-	const { apiRoot, apiNonce } = myJetpackRest;
-	const { topJetpackMenuItemUrl, blogID } = myJetpackInitialState;
-	const connectionData = useConnection( { apiRoot, apiNonce } );
-	const { registrationNonce } = JP_CONNECTION_INITIAL_STATE;
-
-	// Alias: https://github.com/Automattic/jetpack/blob/trunk/projects/packages/connection/src/class-rest-connector.php/#L315
-	const isSiteConnected = connectionData.isRegistered;
-
-	return {
-		apiNonce,
-		apiRoot,
-		blogID,
-		registrationNonce,
-		...connectionData,
-		isSiteConnected,
-		topJetpackMenuItemUrl,
-	};
-}
diff --git a/projects/packages/my-jetpack/_inc/hooks/use-my-jetpack-connection/index.ts b/projects/packages/my-jetpack/_inc/hooks/use-my-jetpack-connection/index.ts
new file mode 100644
index 0000000000000..e2a2933b2b5e7
--- /dev/null
+++ b/projects/packages/my-jetpack/_inc/hooks/use-my-jetpack-connection/index.ts
@@ -0,0 +1,46 @@
+import { useConnection } from '@automattic/jetpack-connection';
+import {
+	getMyJetpackWindowInitialState,
+	getMyJetpackWindowRestState,
+	getMyJetpackWindowConnectionState,
+} from '../../data/utils/get-my-jetpack-window-state';
+/**
+ * React custom hook to get the site purchases data.
+ *
+ * @returns {object} site purchases data
+ */
+
+interface MyJetpackConnection {
+	apiNonce: string;
+	apiRoot: string;
+	blogID: number;
+	registrationNonce: string;
+	isSiteConnected: boolean;
+	topJetpackMenuItemUrl: string;
+	// The useConnection hook is not typed, so we don't know what other properties it returns.
+	// We could define the types here, but that hook returns a lot of data and it's not best practices
+	// to duplicate them here. The best approach would be to type the useConnection hook itself.
+	[ key: string ]: unknown;
+}
+
+const useMyJetpackConnection = (): MyJetpackConnection => {
+	const { apiRoot, apiNonce } = getMyJetpackWindowRestState();
+	const { topJetpackMenuItemUrl, blogID } = getMyJetpackWindowInitialState();
+	const connectionData = useConnection( { apiRoot, apiNonce } );
+	const { registrationNonce } = getMyJetpackWindowConnectionState();
+
+	// Alias: https://github.com/Automattic/jetpack/blob/trunk/projects/packages/connection/src/class-rest-connector.php/#L315
+	const isSiteConnected = connectionData.isRegistered;
+
+	return {
+		apiNonce,
+		apiRoot,
+		blogID,
+		registrationNonce,
+		...connectionData,
+		isSiteConnected,
+		topJetpackMenuItemUrl,
+	};
+};
+
+export default useMyJetpackConnection;
diff --git a/projects/packages/my-jetpack/_inc/utils/get-manage-your-plan-url.ts b/projects/packages/my-jetpack/_inc/utils/get-manage-your-plan-url.ts
index 4f27a16e533ff..0e77b97787318 100644
--- a/projects/packages/my-jetpack/_inc/utils/get-manage-your-plan-url.ts
+++ b/projects/packages/my-jetpack/_inc/utils/get-manage-your-plan-url.ts
@@ -1,6 +1,6 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
 import { MY_JETPACK_MY_PLANS_MANAGE_SOURCE } from '../constants';
-import getMyJetpackWindowState from '../data/utils/get-my-jetpack-window-state';
+import { getMyJetpackWindowInitialState } from '../data/utils/get-my-jetpack-window-state';
 
 /**
  * Return the redurect URL, according to the Jetpack redurects source.
@@ -8,7 +8,7 @@ import getMyJetpackWindowState from '../data/utils/get-my-jetpack-window-state';
  * @returns {string}            the redirect URL
  */
 const getManageYourPlanUrl = () => {
-	const { siteSuffix: site = '', blogID } = getMyJetpackWindowState();
+	const { siteSuffix: site = '', blogID } = getMyJetpackWindowInitialState();
 
 	return getRedirectUrl( MY_JETPACK_MY_PLANS_MANAGE_SOURCE, { site: blogID ?? site } );
 };
diff --git a/projects/packages/my-jetpack/_inc/utils/get-purchase-plan-url.ts b/projects/packages/my-jetpack/_inc/utils/get-purchase-plan-url.ts
index df564cbc5a6d0..dc91be3aa5d1c 100644
--- a/projects/packages/my-jetpack/_inc/utils/get-purchase-plan-url.ts
+++ b/projects/packages/my-jetpack/_inc/utils/get-purchase-plan-url.ts
@@ -1,13 +1,13 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
 import { MY_JETPACK_MY_PLANS_PURCHASE_SOURCE } from '../constants';
-import getMyJetpackWindowState from '../data/utils/get-my-jetpack-window-state';
+import { getMyJetpackWindowInitialState } from '../data/utils/get-my-jetpack-window-state';
 /**
  * Return the redurect URL for purchasing a plan, according to the Jetpack redurects source.
  *
  * @returns {string}            the redirect URL
  */
 const getPurchasePlanUrl = () => {
-	const { siteSuffix: site = '', blogID, myJetpackCheckoutUri } = getMyJetpackWindowState();
+	const { siteSuffix: site = '', blogID, myJetpackCheckoutUri } = getMyJetpackWindowInitialState();
 
 	const query = myJetpackCheckoutUri ? `redirect_to=${ myJetpackCheckoutUri }` : null;
 	return getRedirectUrl( MY_JETPACK_MY_PLANS_PURCHASE_SOURCE, { site: blogID ?? site, query } );
diff --git a/projects/packages/my-jetpack/changelog/update-rewrite-use-my-jetpack-connection-hook-to-typescript b/projects/packages/my-jetpack/changelog/update-rewrite-use-my-jetpack-connection-hook-to-typescript
new file mode 100644
index 0000000000000..1ba65a64fcb68
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/update-rewrite-use-my-jetpack-connection-hook-to-typescript
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Update useMyJetpackConnection hook to TypeScript