Add/mj card update after async site connection (#38549)

* Add My Jetpack card refetch after async site connection

* Fix fetch product query to include product ID to avoid conflicts

* changelog

* Improve typing of connected product card

* changelog

* Fix project versions

* Remove testing change

projects/js-packages/components/changelog/export-button-props-type

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Export button props type to be used elsewhere

projects/js-packages/components/index.ts

@@ -48,6 +48,7 @@ export { default as ToggleControl } from './components/toggle-control';
 export { default as numberFormat } from './components/number-format';
 export { default as QRCode } from './components/qr-code';
 export { default as Button } from './components/button';
+export type { ButtonProps } from './components/button/types';
 export { default as LoadingPlaceholder } from './components/loading-placeholder';
 export { default as TermsOfService } from './components/terms-of-service';
 export { default as Chip } from './components/chip';

projects/js-packages/components/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.55.1",
+	"version": "0.55.2-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

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

@@ -3,19 +3,35 @@
  */
 import { Text } from '@automattic/jetpack-components';
 import { useConnection } from '@automattic/jetpack-connection';
-import PropTypes from 'prop-types';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 /**
  * Internal dependencies
  */
 import { MyJetpackRoutes } from '../../constants';
+import { PRODUCT_STATUSES } from '../../constants';
 import useActivate from '../../data/products/use-activate';
 import useInstallStandalonePlugin from '../../data/products/use-install-standalone-plugin';
 import useProduct from '../../data/products/use-product';
 import useMyJetpackNavigate from '../../hooks/use-my-jetpack-navigate';
 import ProductCard from '../product-card';
+import type { AdditionalAction, SecondaryAction } from '../product-card/types';
+import type { FC, ReactNode } from 'react';
 
-const ConnectedProductCard = ( {
+interface ConnectedProductCardProps {
+	admin: boolean;
+	slug: string;
+	children: ReactNode;
+	isDataLoading?: boolean;
+	Description?: JSX.Element | ( () => null );
+	additionalActions?: AdditionalAction[];
+	secondaryAction?: SecondaryAction;
+	upgradeInInterstitial?: boolean;
+	primaryActionOverride?: AdditionalAction;
+	onMouseEnter?: () => void;
+	onMouseLeave?: () => void;
+}
+
+const ConnectedProductCard: FC< ConnectedProductCardProps > = ( {
 	admin,
 	slug,
 	children,
@@ -33,7 +49,7 @@ const ConnectedProductCard = ( {
 	const { install: installStandalonePlugin, isPending: isInstalling } =
 		useInstallStandalonePlugin( slug );
 	const { activate, isPending: isActivating } = useActivate( slug );
-	const { detail } = useProduct( slug );
+	const { detail, refetch, isLoading: isProductDataLoading } = useProduct( slug );
 	const { name, description: defaultDescription, requiresUserConnection, status } = detail;
 
 	const navigateToConnectionPage = useMyJetpackNavigate( MyJetpackRoutes.Connection );
@@ -67,13 +83,23 @@ const ConnectedProductCard = ( {
 		);
 	};
 
+	useEffect( () => {
+		if (
+			isRegistered &&
+			( status === PRODUCT_STATUSES.SITE_CONNECTION_ERROR ||
+				status === PRODUCT_STATUSES.NEEDS_FIRST_SITE_CONNECTION )
+		) {
+			refetch();
+		}
+	}, [ isRegistered, status, refetch ] );
+
 	return (
 		<ProductCard
 			name={ name }
 			Description={ Description ? Description : DefaultDescription }
 			status={ status }
 			admin={ admin }
-			isFetching={ isActivating || isInstalling }
+			isFetching={ isActivating || isInstalling || isProductDataLoading }
 			isDataLoading={ isDataLoading }
 			isInstallingStandalone={ isInstalling }
 			additionalActions={ additionalActions }
@@ -91,16 +117,4 @@ const ConnectedProductCard = ( {
 	);
 };
 
-ConnectedProductCard.propTypes = {
-	children: PropTypes.node,
-	admin: PropTypes.bool.isRequired,
-	slug: PropTypes.string.isRequired,
-	isDataLoading: PropTypes.bool,
-	additionalActions: PropTypes.array,
-	primaryActionOverride: PropTypes.object,
-	secondaryAction: PropTypes.object,
-	onMouseEnter: PropTypes.func,
-	onMouseLeave: PropTypes.func,
-};
-
 export default ConnectedProductCard;

projects/packages/my-jetpack/_inc/components/product-card/types.ts

@@ -0,0 +1,27 @@
+import type { ButtonProps } from '@automattic/jetpack-components';
+import type { ReactNode } from 'react';
+
+type ProductButtonProps = Pick<
+	ButtonProps,
+	'size' | 'variant' | 'weight' | 'disabled' | 'className'
+>;
+
+export type AdditionalAction = ProductButtonProps & {
+	href: string;
+	label: string;
+	onClick: () => void;
+};
+
+export type SecondaryAction = ProductButtonProps & {
+	href: string;
+	label: string;
+	shouldShowButton?: () => boolean;
+	onClick: () => void;
+	positionFirst?: boolean;
+	isExternalLink?: boolean;
+	icon?: ReactNode;
+	iconSize?: number;
+	disabled?: boolean;
+	isLoading?: boolean;
+	className?: string;
+};

projects/packages/my-jetpack/_inc/data/products/use-product.ts

@@ -35,7 +35,7 @@ export const useAllProducts = (): { [ key: string ]: ProductCamelCase } => {
 // Create query to fetch new product data from the server
 const useFetchProduct = ( productId: string ) => {
 	const queryResult = useSimpleQuery< ProductSnakeCase >( {
-		name: QUERY_PRODUCT_KEY,
+		name: `${ QUERY_PRODUCT_KEY }${ productId }`,
 		query: {
 			path: `${ REST_API_SITE_PRODUCTS_ENDPOINT }/${ productId }`,
 		},

projects/packages/my-jetpack/changelog/add-mj-card-update-after-async-site-connection

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Async card update after async site connection