Add warning in case foundation pages has a problem

Automattic · Oct 22, 2024 · c81afa4 · c81afa4
1 parent c2d1816
commit c81afa4
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 22 deletions.
diff --git a/.../plugins/boost/app/assets/src/js/features/foundation-pages/lib/stores/foundation-pages.ts b/.../plugins/boost/app/assets/src/js/features/foundation-pages/lib/stores/foundation-pages.ts
@@ -7,7 +7,7 @@ import { z } from 'zod';
 export function useFoundationPages(): [ string[], ( newValue: string[] ) => void ] {
 	const [ { data }, { mutate } ] = useDataSync(
 		'jetpack_boost_ds',
-		'foundation_pages',
+		'foundation_pages_list',
 		z.array( z.string() )
 	);
 
@@ -17,3 +17,16 @@ export function useFoundationPages(): [ string[], ( newValue: string[] ) => void
 
 	return [ data || [], updatePages ];
 }
+
+const FoundationPagesProperties = z.object( { max_pages: z.number() } );
+type FoundationPagesProperties = z.infer< typeof FoundationPagesProperties >;
+
+export function useFoundationPagesProperties(): FoundationPagesProperties | undefined {
+	const [ { data } ] = useDataSync(
+		'jetpack_boost_ds',
+		'foundation_pages_properties',
+		FoundationPagesProperties
+	);
+
+	return data;
+}
diff --git a/projects/plugins/boost/app/assets/src/js/features/foundation-pages/meta/meta.tsx b/projects/plugins/boost/app/assets/src/js/features/foundation-pages/meta/meta.tsx
@@ -1,35 +1,79 @@
-import { Button } from '@automattic/jetpack-components';
+import { Button, Notice } from '@automattic/jetpack-components';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import ChevronDown from '$svg/chevron-down';
 import ChevronUp from '$svg/chevron-up';
 import React, { useEffect, useState } from 'react';
 import clsx from 'clsx';
 import styles from './meta.module.scss';
-import { useFoundationPages } from '../lib/stores/foundation-pages';
-import { usePremiumFeatures } from '$lib/stores/premium-features';
+import { useFoundationPages, useFoundationPagesProperties } from '../lib/stores/foundation-pages';
+import { createInterpolateElement } from '@wordpress/element';
+import { recordBoostEvent } from '$lib/utils/analytics';
+import getSupportLink from '$lib/utils/get-support-link';
 
 const Meta = () => {
 	const [ isExpanded, setIsExpanded ] = useState( false );
 	const [ foundationPages, setFoundationPages ] = useFoundationPages();
-	const premiumFeatures = usePremiumFeatures();
-	const maxPatterns = premiumFeatures.includes( 'cloud-critical-css' ) ? 10 : 1;
+	const foundationPagesProperties = useFoundationPagesProperties();
 
 	const updatePatterns = ( newValue: string ) => {
 		const newPatterns = newValue.split( '\n' ).map( line => line.trim() );
 
 		setFoundationPages( newPatterns );
 	};
 
+	let content = null;
+
+	if ( foundationPagesProperties !== undefined ) {
+		content = (
+			<BypassPatterns
+				patterns={ foundationPages.join( '\n' ) }
+				setPatterns={ updatePatterns }
+				maxPatterns={ foundationPagesProperties.max_pages }
+			/>
+		);
+	} else {
+		content = (
+			<Notice
+				level="warning"
+				title={ __( 'Failed to load', 'jetpack-boost' ) }
+				hideCloseButton={ true }
+			>
+				<p>
+					{ createInterpolateElement(
+						__(
+							'Refresh the page and try again. If the issue persists, please <link>contact support</link>.',
+							'jetpack-boost'
+						),
+						{
+							link: (
+								// eslint-disable-next-line jsx-a11y/anchor-has-content
+								<a
+									href={ getSupportLink() }
+									target="_blank"
+									rel="noopener noreferrer"
+									onClick={ () => {
+										recordBoostEvent( 'foundation_pages_properties_failed', {} );
+									} }
+								/>
+							),
+						}
+					) }
+				</p>
+			</Notice>
+		);
+	}
+
 	return (
 		<div className={ styles.wrapper } data-testid="foundation-pages-meta">
 			<div className={ styles.head }>
 				<div className={ styles.summary }>
-					{ sprintf(
-						/* translators: %1$d is the number of foundation pages added, %2$d is the maximum number allowed */
-						__( '%1$d / %2$d added', 'jetpack-boost' ),
-						foundationPages.length,
-						maxPatterns
-					) }
+					{ foundationPagesProperties &&
+						sprintf(
+							/* translators: %1$d is the number of foundation pages added, %2$d is the maximum number allowed */
+							__( '%1$d / %2$d added', 'jetpack-boost' ),
+							foundationPages.length,
+							foundationPagesProperties.max_pages
+						) }
 				</div>
 				<div className={ styles.actions }>
 					<Button
@@ -44,15 +88,7 @@ const Meta = () => {
 					</Button>
 				</div>
 			</div>
-			{ isExpanded && (
-				<div className={ styles.body }>
-					<BypassPatterns
-						patterns={ foundationPages.join( '\n' ) }
-						setPatterns={ updatePatterns }
-						maxPatterns={ maxPatterns }
-					/>
-				</div>
-			) }
+			{ isExpanded && <div className={ styles.body }>{ content }</div> }
 		</div>
 	);
 };

diff --git a/projects/plugins/boost/app/assets/src/js/lib/utils/get-support-link.ts b/projects/plugins/boost/app/assets/src/js/lib/utils/get-support-link.ts
@@ -0,0 +1,10 @@
+import { usePremiumFeatures } from '$lib/stores/premium-features';
+
+export default function getSupportLink() {
+	const premiumFeatures = usePremiumFeatures();
+	if ( premiumFeatures.includes( 'support' ) ) {
+		return 'https://jetpack.com/contact-support/';
+	}
+
+	return 'https://wordpress.org/support/plugin/jetpack-boost/';
+}
diff --git a/projects/plugins/boost/app/lib/Foundation_Pages.php b/projects/plugins/boost/app/lib/Foundation_Pages.php
@@ -25,4 +25,14 @@ public function remove_ccss_front_page_provider( $providers ) {
 	public function get_pages() {
 		return array();
 	}
+
+	public function get_properties() {
+		return array(
+			'max_pages' => $this->get_max_pages(),
+		);
+	}
+
+	private function get_max_pages() {
+		return Premium_Features::has_any() ? 10 : 1;
+	}
 }
diff --git a/projects/plugins/boost/wp-js-data-sync.php b/projects/plugins/boost/wp-js-data-sync.php
@@ -17,6 +17,7 @@
 use Automattic\Jetpack_Boost\Lib\Critical_CSS\Data_Sync_Actions\Set_Provider_CSS;
 use Automattic\Jetpack_Boost\Lib\Critical_CSS\Data_Sync_Actions\Set_Provider_Error_Dismissed;
 use Automattic\Jetpack_Boost\Lib\Critical_CSS\Data_Sync_Actions\Set_Provider_Errors;
+use Automattic\Jetpack_Boost\Lib\Foundation_Pages;
 use Automattic\Jetpack_Boost\Lib\My_Jetpack;
 use Automattic\Jetpack_Boost\Lib\Premium_Features;
 use Automattic\Jetpack_Boost\Lib\Premium_Pricing;
@@ -385,4 +386,6 @@ function jetpack_boost_initialize_datasync() {
 
 jetpack_boost_register_option( 'image_cdn_liar', Schema::as_boolean()->fallback( false ), new Status( Liar::get_slug() ) );
 
-jetpack_boost_register_option( 'foundation_pages', Schema::as_array( Schema::as_string() )->fallback( array() ), new Foundation_Pages_Entry( 'foundation_pages' ) );
+jetpack_boost_register_option( 'foundation_pages_list', Schema::as_array( Schema::as_string() )->fallback( array( '/' ) ), new Foundation_Pages_Entry( 'foundation_pages_list' ) );
+
+jetpack_boost_register_readonly_option( 'foundation_pages_properties', array( new Foundation_Pages(), 'get_properties' ) );