My Jetpack: fix highlights and purchases API calls when not connected (…

…#39522)

* We now disable the API call if Jetpack is not connect

* changelog

* Removed placeholder data

* Removed enabled check from purchases

* Returning null path when no userId for highlights endpoint

* Updated implementation to rely oon not using a path instead of disabling

* Changed from using the siteID as discriminator to using isSiteConnected

* Changed to use enabled property again

projects/packages/my-jetpack/_inc/components/plans-section/index.jsx

@@ -177,13 +177,16 @@ function PlanSectionFooter( { numberOfPurchases } ) {
  */
 export default function PlansSection() {
 	const userIsAdmin = !! getMyJetpackWindowInitialState( 'userIsAdmin' );
+	const { isSiteConnected } = useMyJetpackConnection();
+
 	const {
 		data: purchases,
 		isLoading,
 		isError,
 	} = useSimpleQuery( {
 		name: QUERY_PURCHASES_KEY,
 		query: { path: REST_API_SITE_PURCHASES_ENDPOINT },
+		options: { enabled: isSiteConnected },
 	} );
 
 	const isDataLoaded = purchases && ! isLoading && ! isError;

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

@@ -11,17 +11,16 @@ import { includesLifetimePurchase } from '../../utils/is-lifetime-purchase';
  * @return {object} The RedeemTokenScreen component.
  */
 export default function RedeemTokenScreen() {
-	const { userConnectionData } = useMyJetpackConnection();
+	const { userConnectionData, isSiteConnected } = 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 ||
 		userConnectionData?.currentUser?.wpcomUser?.login ||
 		userConnectionData?.currentUser?.username;
 	const { isLoading, data: purchases } = useSimpleQuery( {
 		name: QUERY_PURCHASES_KEY,
-		query: {
-			path: REST_API_SITE_PURCHASES_ENDPOINT,
-		},
+		query: { path: REST_API_SITE_PURCHASES_ENDPOINT },
+		options: { enabled: isSiteConnected },
 	} );
 
 	if ( isLoading ) {

projects/packages/my-jetpack/_inc/components/stats-section/index.jsx

@@ -12,15 +12,14 @@ import StatsCards from './cards';
 
 const StatsSection = () => {
 	const slug = 'stats';
-	const { blogID } = useMyJetpackConnection();
+	const { blogID, isSiteConnected } = useMyJetpackConnection();
 	const { detail } = useProduct( slug );
 	const { status } = detail;
 	const isAdmin = !! getMyJetpackWindowInitialState( 'userIsAdmin' );
 	const { data: statsCounts } = useSimpleQuery( {
 		name: QUERY_STATS_COUNTS_KEY,
-		query: {
-			path: getStatsHighlightsEndpoint( blogID ),
-		},
+		query: { path: getStatsHighlightsEndpoint( blogID ) },
+		options: { enabled: isSiteConnected },
 	} );
 	const counts = statsCounts?.past_seven_days || {};
 	const previousCounts = statsCounts?.between_past_eight_and_fifteen_days || {};

projects/packages/my-jetpack/changelog/fix-my-jetpack-highlights-and-purchases-api-calls-when-not-connected

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixed a bug where the purchases and highlights APIs were being called without a valid Jetpack connection