Refactors AIFixesButton actions!

Yoast · May 2, 2024 · d931780 · d931780
1 parent 06a7fcc
commit d931780
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/packages/analysis-report/src/AnalysisResult.js b/packages/analysis-report/src/AnalysisResult.js
@@ -22,7 +22,7 @@ const AnalysisResultBase = styled.li`
 	min-height: 24px;
 	padding: 0;
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	position: relative;
 `;
 

diff --git a/packages/js/src/components/contentAnalysis/SeoAnalysis.js b/packages/js/src/components/contentAnalysis/SeoAnalysis.js
@@ -35,21 +35,23 @@ const AnalysisHeader = styled.span`
 	display: block;
 `;
 
-const AIFixesModal = ( { isPremium, id } ) => {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
+const AIFixesModal = ( ) => {
+	// const [ isModalOpen, setIsModalOpen ] = useState( false );
 
-	const closeModal = useCallback( () => setIsModalOpen( false ), [] );
-	const openModal = useCallback( () => setIsModalOpen( true ), [] );
+	// const closeModal = useCallback( () => setIsModalOpen( false ), [] );
+	// const openModal = useCallback( () => setIsModalOpen( true ), [] );
 
-	if ( isPremium ) {
-		addAction( "yoast.ai.fixAssessments", id );
-	} else {
-		openModal();
-	}
+	// if ( isPremium ) {
+	// 	addAction( "yoast.ai.fixAssessments", id );
+	// } else {
+	// 	openModal();
+	// }
 
-	return isModalOpen && <AIModal className="yst-introduction-modal" isOpen={ isModalOpen } onClose={ closeModal }>
-		<ModalContent> I am the AI modal </ModalContent>
-	</AIModal>;
+	return (
+		<AIModal className="yst-introduction-modal" >
+			<ModalContent> I am the AI modal </ModalContent>
+		</AIModal>
+	);
 };
 
 /**
@@ -229,23 +231,24 @@ class SeoAnalysis extends Component {
 			alert( "I am the AI modal" );
 		};
 		const [ isModalOpen, , , setIsModalOpenTrue, setIsModalOpenFalse ] = useToggleState( false );
-		const handleClick = useCallback( () => {
-			isPremium ? addActions()
-				: setIsModalOpenTrue();
+		const handleClick = useCallback( () => { isPremium ? addActions() :
+			setIsModalOpenTrue();
 		}, [ setIsModalOpenTrue ] );
 		// 	const [ isPressed, setIsPressed ] = useState( false );
 		// 	const handlePress = useCallback( () => setIsPressed( ! isPressed ), [ isPressed, setIsPressed ] );
 		return (
 			<>
 				<AIFixesButton
-						onClick={ onClick }
+						isPremium={ isPremium }
+						onClick={ handleClick }
 						ariaLabel={  ariaLabel }
 						id={ aiFixesId }
 						className={ "yoast-tooltip yoast-tooltip-w" }
 						isPressed={ isPressed }
 					>
 					<SparklesIcon style={{ width: "70%", height: "70%", color: "#555" }} />
 				</AIFixesButton>
+				<AIFixesModal isOpen={ isModalOpen } onClose={ setIsModalOpenFalse }/>
 			</>
 		);
 	};