Marketplace: Fix the bug hiding connection warning (#44207)

* Marketplace: Fix the bug hiding connection hiding

Actually, this bug causes all modal state to be lost. But since we
check the connection only when the page loads, on a subsequent tries, we can 't show the connection warning.

* Marketplace: update documentation and typos

* Add changefile(s) from automation for the following project(s): woocommerce

---------

Co-authored-by: github-actions <github-actions@github.com>

plugins/woocommerce-admin/client/marketplace/components/install-flow/install-new-product-modal.tsx

@@ -40,6 +40,7 @@ function InstallNewProductModal( props: { products: Product[] } ) {
 	);
 	const [ product, setProduct ] = useState< Product >();
 	const [ installedProducts, setInstalledProducts ] = useState< string[] >();
+	const [ isStoreConnected, setIsStoreConnected ] = useState< boolean >();
 	const [ activateUrl, setActivateUrl ] = useState< string >();
 	const [ documentationUrl, setDocumentationUrl ] = useState< string >();
 	const [ showModal, setShowModal ] = useState< boolean >( false );
@@ -54,22 +55,9 @@ function InstallNewProductModal( props: { products: Product[] } ) {
 	// Check if the store is connected to Woo.com. This is run once, when the component is mounted.
 	useEffect( () => {
 		const wccomSettings = getAdminSetting( 'wccomHelper', {} );
-		const isStoreConnected = wccomSettings?.isConnected;
 
 		setInstalledProducts( wccomSettings?.installedProducts );
-
-		if ( isStoreConnected === false ) {
-			setInstallStatus( InstallFlowStatus.notConnected );
-			setNotice( {
-				status: 'warning',
-				message: __(
-					'In order to install a product, you need to first connect your account.',
-					'woocommerce'
-				),
-			} );
-		} else {
-			setInstallStatus( InstallFlowStatus.notInstalled );
-		}
+		setIsStoreConnected( wccomSettings?.isConnected );
 	}, [] );
 
 	/**
@@ -107,10 +95,28 @@ function InstallNewProductModal( props: { products: Product[] } ) {
 			}
 		}
 
+		if ( ! isStoreConnected ) {
+			setInstallStatus( InstallFlowStatus.notConnected );
+			setNotice( {
+				status: 'warning',
+				message: __(
+					'In order to install a product, you need to first connect your account.',
+					'woocommerce'
+				),
+			} );
+		} else {
+			setInstallStatus( InstallFlowStatus.notInstalled );
+		}
+
 		setShowModal( true );
 		setProduct( productToInstall );
-	}, [ query, props.products, installedProducts ] );
+	}, [ query, props.products, installedProducts, isStoreConnected ] );
 
+	/**
+	 * WordPress gives us a activateURL as a response to us installig the product.
+	 * Even though it's not an API endpoint, we can hit that URL with fetch
+	 * and activate the plugin.
+	 */
 	function activateClick() {
 		if ( ! activateUrl ) {
 			return;
@@ -169,6 +175,7 @@ function InstallNewProductModal( props: { products: Product[] } ) {
 				).then( ( downloadResponse ) => {
 					dispatch( installingStore ).stopInstalling( product.id );
 
+					// No activateUrl means we can't activate the plugin.
 					if ( downloadResponse.data.activateUrl ) {
 						setActivateUrl( downloadResponse.data.activateUrl );
 
@@ -184,7 +191,7 @@ function InstallNewProductModal( props: { products: Product[] } ) {
 			} )
 			.catch( ( error ) => {
 				/**
-				 * apiFetch doesn't return the error code in the error condition.
+				 * apiFetch doesn't return the HTTP error code in the error condition.
 				 * We'll rely on the data returned by the server.
 				 */
 				if ( error.data.redirect_location ) {
@@ -196,6 +203,7 @@ function InstallNewProductModal( props: { products: Product[] } ) {
 						),
 					} );
 
+					// Wait to allow users to read the notice.
 					setTimeout( () => {
 						window.location.href = error.data.redirect_location;
 					}, 5000 );
@@ -206,7 +214,7 @@ function InstallNewProductModal( props: { products: Product[] } ) {
 						message:
 							error.data.message ??
 							__(
-								'An error ocurred. Please try again later.',
+								'An error occurred. Please try again later.',
 								'woocommerce'
 							),
 					} );

plugins/woocommerce-admin/client/marketplace/components/product-card/product-card-footer.tsx

@@ -41,6 +41,7 @@ function ProductCardFooter( props: { product: Product } ) {
 			return false;
 		}
 
+		// This value is sent from the Woo.com API.
 		if ( ! productToCheck.isInstallable ) {
 			return false;
 		}

plugins/woocommerce-admin/client/marketplace/contexts/marketplace-context.tsx

@@ -27,6 +27,10 @@ export function MarketplaceContextProvider( props: {
 		[]
 	);
 
+	/**
+	 * Knowing installed products will help us to determine which products
+	 * should have the "Add to Site" button enabled.
+	 */
 	useEffect( () => {
 		const wccomSettings = getAdminSetting( 'wccomHelper', {} );
 		const installedProductSlugs: string[] =

plugins/woocommerce/changelog/44207-fix-44131-connection-warning-bug

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+Comment: Fix the Marketplace page bug where the connection warning is not shown
+