✨ Accordion can be toggled via URL hash

modules/ppcp-settings/resources/js/Components/ReusableComponents/AccordionSection.js

@@ -1,3 +1,4 @@
+import { useEffect } from '@wordpress/element';
 import { Icon } from '@wordpress/components';
 import { chevronDown, chevronUp } from '@wordpress/icons';
 
@@ -5,11 +6,33 @@ import { useState } from 'react';
 
 const Accordion = ( {
 	title,
-	initiallyOpen = false,
+	initiallyOpen = null,
 	className = '',
+	id = '',
 	children,
 } ) => {
-	const [ isOpen, setIsOpen ] = useState( initiallyOpen );
+	const determineInitialState = () => {
+		if ( id && initiallyOpen === null ) {
+			return window.location.hash === `#${ id }`;
+		}
+		return !! initiallyOpen;
+	};
+
+	const [ isOpen, setIsOpen ] = useState( determineInitialState );
+
+	useEffect( () => {
+		const handleHashChange = () => {
+			if ( id && window.location.hash === `#${ id }` ) {
+				setIsOpen( true );
+			}
+		};
+
+		window.addEventListener( 'hashchange', handleHashChange );
+
+		return () => {
+			window.removeEventListener( 'hashchange', handleHashChange );
+		};
+	}, [ id ] );
 
 	const toggleOpen = ( ev ) => {
 		setIsOpen( ! isOpen );
@@ -26,7 +49,7 @@ const Accordion = ( {
 	}
 
 	return (
-		<div className={ wrapperClasses.join( ' ' ) }>
+		<div className={ wrapperClasses.join( ' ' ) } id={ id }>
 			<button
 				onClick={ toggleOpen }
 				className="ppcp-r-accordion--title"

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js

@@ -57,7 +57,7 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
 					'woocommerce-paypal-payments'
 				) }
 				className="onboarding-advanced-options"
-				initiallyOpen={ false }
+				id="advanced-options"
 			>
 				<AdvancedOptionsForm setCompleted={ setCompleted } />
 			</AccordionSection>