✨ Add new Accordion Section for advanced options

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

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import data from '../../utils/data';
+
+const Accordion = ( { title, initiallyOpen, children } ) => {
+	const [ isOpen, setIsOpen ] = useState( initiallyOpen );
+
+	const toggleOpen = ( ev ) => {
+		setIsOpen( ! isOpen );
+		ev?.preventDefault();
+		return false;
+	};
+
+	const iconChevron = data().getImage(
+		'icon-arrow-down.svg',
+		'ppcp-r-accordion--icon'
+	);
+
+	return (
+		<div className={ `ppcp-r-accordion ${ isOpen ? 'open' : '' }` }>
+			<button
+				onClick={ toggleOpen }
+				className="ppcp-r-accordion--title"
+				type="button"
+			>
+				{ title }
+				{ iconChevron }
+			</button>
+			{ isOpen && (
+				<div className="ppcp-r-accordion--content">{ children }</div>
+			) }
+		</div>
+	);
+};
+
+export default Accordion;

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

@@ -8,6 +8,7 @@ import BadgeBox, {
 	BADGE_BOX_TITLE_BIG,
 } from '../../ReusableComponents/BadgeBox';
 import AdvancedOptionsForm from './Components/AdvancedOptionsForm';
+import AccordionSection from '../../ReusableComponents/AccordionSection';
 
 const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
 	return (
@@ -44,7 +45,16 @@ const StepWelcome = ( { setStep, currentStep, setCompleted } ) => {
 			</div>
 			<Separator className="ppcp-r-page-welcome-mode-separator" />
 			<WelcomeDocs />
-			<AdvancedOptionsForm setCompleted={ setCompleted } />
+			<Separator text={ __( 'or', 'woocommerce-paypal-payments' ) } />
+			<AccordionSection
+				title={ __(
+					'See advanced options',
+					'woocommerce-paypal-payments'
+				) }
+				initiallyOpen={ false }
+			>
+				<AdvancedOptionsForm setCompleted={ setCompleted } />
+			</AccordionSection>
 		</div>
 	);
 };