feature: added warning if site is not reachable

Author: up1512001

assets/src/admin/templates/components/SiteSelection.js

@@ -15,17 +15,18 @@ import { getInitials } from '../../../js/utils';
 /**
  * SiteSelection component.
  *
- * @param {Object}   props                     - Component props.
- * @param {Array}    props.siteInfo            - Array of connected site information.
- * @param {boolean}  props.isApplying          - Boolean indicating if templates are being applied.
- * @param {Function} props.setIsApplying       - Function to set the isApplying state.
- * @param {Function} props.onApply             - Function to handle applying templates to selected sites.
- * @param {Function} props.setIsApplyModalOpen - Function to control the visibility of the apply modal.
- * @param {Function} props.setSelectedSites    - Function to set the selected site IDs.
- * @param {Array}    props.selectedSites       - Array of selected site IDs.
- * @param {Object}   props.notice              - Notice object containing type and message.
- * @param {Array}    props.brandSiteTemplates  - Array of templates available for brand sites.
- * @param {Array}    props.selectedTemplates   - Array of selected template IDs.
+ * @param {Object}   props                        - Component props.
+ * @param {Array}    props.siteInfo               - Array of connected site information.
+ * @param {boolean}  props.isApplying             - Boolean indicating if templates are being applied.
+ * @param {Function} props.setIsApplying          - Function to set the isApplying state.
+ * @param {Function} props.onApply                - Function to handle applying templates to selected sites.
+ * @param {Function} props.setIsApplyModalOpen    - Function to control the visibility of the apply modal.
+ * @param {Function} props.setSelectedSites       - Function to set the selected site IDs.
+ * @param {Array}    props.selectedSites          - Array of selected site IDs.
+ * @param {Object}   props.notice                 - Notice object containing type and message.
+ * @param {Array}    props.brandSiteTemplates     - Array of templates available for brand sites.
+ * @param {Array}    props.selectedTemplates      - Array of selected template IDs.
+ * @param {Object}   props.sitesHealthCheckResult - Object containing health check results for sites.
  * @return {JSX.Element} The rendered component.
  */
 const SiteSelection = ( {
@@ -39,6 +40,7 @@ const SiteSelection = ( {
 	notice,
 	brandSiteTemplates,
 	selectedTemplates,
+	sitesHealthCheckResult,
 } ) => {
 	const handleSiteSelection = ( siteId ) => {
 		setSelectedSites( ( prevSelected ) => {
@@ -145,7 +147,7 @@ const SiteSelection = ( {
 										onClick={ selectAllSites }
 										disabled={
 											selectedSelectableSiteCount === selectableSiteCount ||
-									selectableSiteCount === 0
+											selectableSiteCount === 0
 										}
 										className="od-bulk-action"
 									>
@@ -185,7 +187,7 @@ const SiteSelection = ( {
 						<div className="od-sites-list od-sites-grid">
 							{ siteInfo.map( ( { id, name, url, logo } ) => {
 								const isSelected = selectedSites.includes( id );
-								const isDisabled = areAllTemplatesPresent( id ) && ! isSelected;
+								const isDisabled = ( ( areAllTemplatesPresent( id ) && ! isSelected ) || ( sitesHealthCheckResult[ id ] && ! sitesHealthCheckResult[ id ].success ) );
 
 								return (
 									<div
@@ -205,7 +207,9 @@ const SiteSelection = ( {
 										<div className="od-site-inner">
 											{ isSelected && (
 												<div className="od-site-selected-indicator">
-													<span className="dashicons dashicons-yes-alt"></span>
+													{
+														renderIcon( { sitesHealthCheckResult, id } )
+													}
 												</div>
 											) }
 											{ isDisabled && ! isSelected && (
@@ -216,7 +220,7 @@ const SiteSelection = ( {
 														'onedesign',
 													) }
 												>
-													<span className="dashicons dashicons-yes"></span>
+													{ renderIcon( { sitesHealthCheckResult, id } ) }
 												</div>
 											) }
 											<div className="od-site-logo">
@@ -314,4 +318,22 @@ const SiteSelection = ( {
 	);
 };
 
+/**
+ * Render the appropriate dashicon based on health check result.
+ *
+ * @param {Object} props                        - Component props.
+ * @param {Object} props.sitesHealthCheckResult - Object containing health check results for sites.
+ * @param {number} props.id                     - Site ID.
+ * @return {JSX.Element} The rendered dashicon element.
+ */
+const renderIcon = ( { sitesHealthCheckResult, id } ) => {
+	return (
+		sitesHealthCheckResult[ id ] && ! sitesHealthCheckResult[ id ].success ? (
+			<span className="dashicons dashicons-warning"></span>
+		) : (
+			<span className="dashicons dashicons-yes-alt"></span>
+		)
+	);
+};
+
 export default SiteSelection;

assets/src/admin/templates/components/TemplateModal.js

@@ -43,6 +43,7 @@ const TemplateModal = () => {
 	const [ connectedSitesTemplates, setConnectedSitesTemplates ] = useState( {} );
 	const [ notice, setNotice ] = useState( null );
 	const [ isReSyncing, setIsReSyncing ] = useState( false );
+	const [ sitesHealthCheckResult, setSitesHealthCheckResult ] = useState( {} );
 	const [ tabs, setTabs ] = useState( [
 		{
 			name: 'baseTemplate',
@@ -54,6 +55,50 @@ const TemplateModal = () => {
 	const [ isApplyModalOpen, setIsApplyModalOpen ] = useState( false );
 	const [ isApplying, setIsApplying ] = useState( false );
 
+	const PerformHealthCheckOnSites = useCallback( async () => {
+		setIsLoading( true );
+		try {
+			for ( const siteId of Object.keys( siteInfo ) ) {
+				const siteUrl = siteInfo[ siteId ]?.url;
+				const siteApiKey = siteInfo[ siteId ]?.api_key;
+				if ( siteUrl ) {
+					try {
+						const response = await fetch(
+							`${ siteUrl }/wp-json/onedesign/v1/health-check?timestamp=${ Date.now() }`,
+							{
+								method: 'GET',
+								headers: {
+									'Content-Type': 'application/json',
+									'X-OneDesign-Token': siteApiKey,
+								},
+							},
+						);
+						const data = await response.json();
+						if ( ! data.success ) {
+							setSitesHealthCheckResult( ( prevResults ) => ( {
+								...prevResults,
+								[ siteInfo[ siteId ]?.id ]: { success: false, message: data.message || __( 'Health check failed.', 'onedesign' ) },
+							} ) );
+							continue;
+						}
+						setSitesHealthCheckResult( ( prevResults ) => ( {
+							...prevResults,
+							[ siteInfo[ siteId ]?.id ]: data,
+						} ) );
+					} catch ( error ) {
+						setSitesHealthCheckResult( ( prevResults ) => ( {
+							...prevResults,
+							[ siteInfo[ siteId ]?.id ]: { success: false, message: 'Failed to reach the site.' },
+						} ) );
+					}
+				}
+			}
+		} catch ( error ) {
+		} finally {
+			setIsLoading( false );
+		}
+	}, [ siteInfo ] );
+
 	const fetchConnectedSitesTemplates = useCallback( async () => {
 		try {
 			const response = await fetch(
@@ -220,6 +265,11 @@ const TemplateModal = () => {
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
+	// to check if the connected sites are reachable or not
+	useEffect( () => {
+		PerformHealthCheckOnSites();
+	}, [ PerformHealthCheckOnSites ] );
+
 	// clear notice on tab change
 	useEffect( () => {
 		setNotice( null );
@@ -432,6 +482,7 @@ const TemplateModal = () => {
 										notice={ notice }
 										brandSiteTemplates={ connectedSitesTemplates }
 										selectedTemplates={ selectedTemplates }
+										sitesHealthCheckResult={ sitesHealthCheckResult }
 									/>
 								</Modal>
 							) }

assets/src/css/editor.scss

@@ -786,6 +786,10 @@
 		width: 16px;
 		height: 16px;
 	}
+
+	&:has(.dashicons.dashicons-warning) {
+		background: #d63638;
+	}
 }
 
 .od-site-label {