Merge pull request #66 from newfold-labs/release/2.2.2

Changes for Release/2.2.2

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '868ae9d5607045463515');
+<?php return array('dependencies' => array('lodash', 'react', 'wp-api-fetch', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => 'cbd602aa372baa7bb416');

includes/HelpCenter.php

@@ -126,10 +126,10 @@ public function register_assets() {
 			\wp_enqueue_script( self::$slug );
 
 			\wp_enqueue_style(
-				'stylesheet',
+				self::$slug,
 				NFD_HELPCENTER_PLUGIN_URL . 'vendor/newfold-labs/wp-module-help-center/build/index.css',
 				array(),
-				'1',
+				$asset['version'],
 				'screen'
 			);
 

src/components/Feedback.js

@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Analytics, InteractionAPIs } from '../utils';
+import { Analytics, InteractionAPIs, LocalStorageUtils } from '../utils';
 
 const Feedback = ( { postId, source } ) => {
 	const [ status, setStatus ] = useState( '' );
@@ -43,6 +43,11 @@ const Feedback = ( { postId, source } ) => {
 		}
 	}, [ status ] );
 
+	const handleFeedback = (feedback) => {
+		setStatus( feedback );
+		LocalStorageUtils.updateFeedbackStatus( postId );
+	}
+
 	return (
 		<div className="feedback-container">
 			{ /* Conditionally render the question and buttons */ }
@@ -59,17 +64,13 @@ const Feedback = ( { postId, source } ) => {
 					<div className="icon">
 						<button
 							ref={ yesButtonRef }
-							onClick={ () => {
-								setStatus( 'helpful' );
-							} }
+							onClick={ () =>  handleFeedback( 'helpful' ) }
 							className="feedback-button yes"
 						>
 							{ __( 'Yes', 'wp-module-help-center' ) }
 						</button>
 						<button
-							onClick={ () => {
-								setStatus( 'notHelpful' );
-							} }
+							onClick={ () => handleFeedback( 'notHelpful' ) }
 							ref={ noButtonRef }
 							className="feedback-button no"
 						>

src/components/HelpCenter.js

@@ -1,11 +1,13 @@
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import SearchResults from './SearchResults';
 import { CapabilityAPI, LocalStorageUtils } from '../utils';
 import HelpCenterIntro from './HelpCenterIntro';
 
 const HelpCenter = ( props ) => {
 	const [ visible, setVisible ] = useState( false );
 	const [ helpEnabled, setHelpEnabled ] = useState( false );
+	const wrapper = useRef();
+	const introRef = useRef();
 
 	const getHelpStatus = async () => {
 		try {
@@ -38,9 +40,17 @@ const HelpCenter = ( props ) => {
 	}
 
 	return (
-		<div className="nfd-help-center" id="helpcenterResultsWrapper">
-			<HelpCenterIntro />
-			<SearchResults refresh={ props.refresh } />
+		<div
+			className="nfd-help-center"
+			id="helpcenterResultsWrapper"
+			ref={ wrapper }
+		>
+			<HelpCenterIntro introRef={ introRef } />
+			<SearchResults
+				wrapper={ wrapper }
+				introRef={ introRef }
+				{ ...props }
+			/>
 		</div>
 	);
 };

src/components/HelpCenterIntro.js

@@ -4,36 +4,34 @@ import { __ } from '@wordpress/i18n';
 import { ReactComponent as AIStars } from '../icons/ai-stars.svg';
 import { useRevealText, LocalStorageUtils } from '../utils';
 
-const HelpCenterIntro = () => {
+const HelpCenterIntro = ( { introRef } ) => {
 	const [ startReveal, setStartReveal ] = useState( false );
 
 	useEffect( () => {
-		// Get the stored results from localStorage using LocalStorageUtils
-		const storedResults = LocalStorageUtils.getResultInfo();
-
-		// Check if the length of the stored results is <= 0
-		if ( storedResults.length <= 0 ) {
-			// If true, enable reveal effect
-			setStartReveal( true );
-		} else {
-			// Always ensure startReveal is set, even if it's false
-			setStartReveal( false );
-		}
+		setStartReveal( LocalStorageUtils.getResultInfo().length <= 0 );
 	}, [] );
 
 	const introText = __(
 		'Hi! I’m your WordPress AI assistant. </br></br> Ask me how to do things in WordPress and I’ll provide step by step instructions.</br></br> I’m still learning so I don’t have all the answers just yet.',
 		'wp-module-help-center'
 	);
 
-	// const revealedIntro = useRevealText( introText, 50, startReveal );
 	const { displayedText: revealedIntro } = useRevealText(
 		introText || '',
 		50,
 		startReveal
 	);
 	return (
-		<div className="helpcenter-intro">
+		<div
+			className="helpcenter-intro"
+			ref={ introRef }
+			style={ {
+				visibility:
+					LocalStorageUtils.getResultInfo().length > 0
+						? 'hidden'
+						: 'visible',
+			} }
+		>
 			<div>
 				<AIStars />
 			</div>

src/components/ResultContent.js

@@ -19,6 +19,8 @@ export const ResultContent = ( {
 	index,
 	isNewResult,
 	searchInput,
+	wrapper,
+	feedbackSubmitted,
 } ) => {
 	const isNewEntry =
 		isNewResult && index === LocalStorageUtils.getResultInfo().length - 1;
@@ -35,12 +37,8 @@ export const ResultContent = ( {
 		const viewportHeight = window.innerHeight;
 		const minHeight = viewportHeight - 332;
 		responseRef.current.style.minHeight = `${ minHeight }px`;
-
-		const helpcenterResultsWrapper = document.getElementById(
-			'helpcenterResultsWrapper'
-		);
-		const scrollDistance = helpcenterResultsWrapper.scrollHeight;
-		helpcenterResultsWrapper.scrollBy( {
+		const scrollDistance = wrapper.current.scrollHeight;
+		wrapper.current.scrollBy( {
 			top: scrollDistance,
 			left: 0,
 			behavior: 'smooth',
@@ -115,6 +113,7 @@ export const ResultContent = ( {
 	function shouldShowFeedback() {
 		return (
 			! noResult &&
+			! feedbackSubmitted &&
 			showFeedbackSection &&
 			content &&
 			revealComplete &&