Add tracks and small refactor to toggle

plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/Toggle/Toggle.js

@@ -11,29 +11,30 @@ import { useState } from '@wordpress/element';
  */
 import './Toggle.scss';
 
-export const Toggle = ( { children, heading } ) => {
-	const [ isOpen, setIsOpen ] = useState( false );
-	const onToggle = () => {
-		setIsOpen( ! isOpen );
+export const Toggle = ( { children, heading, onToggle } ) => {
+	const [ isShow, setIsShow ] = useState( false );
+	const onClick = () => {
+		onToggle( isShow );
+		setIsShow( ! isShow );
 	};
 
 	return (
 		<div className="toggle">
 			<Button
 				isTertiary
-				onClick={ onToggle }
-				aria-expanded={ isOpen }
+				onClick={ onClick }
+				aria-expanded={ isShow }
 				frameBorder={ 0 }
 				className="toggle-button"
 			>
 				{ heading }
-				{ isOpen ? (
+				{ isShow ? (
 					<ChevronUpIcon size={ 18 } />
 				) : (
 					<ChevronDownIcon size={ 18 } />
 				) }
 			</Button>
-			{ isOpen ? children : null }
+			{ isShow ? children : null }
 		</div>
 	);
 };

plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/index.js

@@ -161,6 +161,16 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
 		[ paymentGateways ]
 	);
 
+	const trackSeeMore = () => {
+		recordEvent( 'tasklist_payment_see_more', {} );
+	};
+
+	const trackToggle = ( isShow ) => {
+		recordEvent( 'tasklist_payment_show_toggle', {
+			toggle: isShow ? 'hide' : 'show',
+		} );
+	};
+
 	const recommendation = useMemo(
 		() =>
 			Array.from( paymentGateways.values() )
@@ -265,7 +275,12 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
 			paymentGateways={ additionalGateways }
 			markConfigured={ markConfigured }
 			footerLink={
-				<Button href={ SEE_MORE_LINK } target="_blank" isTertiary>
+				<Button
+					href={ SEE_MORE_LINK }
+					target="_blank"
+					onClick={ trackSeeMore }
+					isTertiary
+				>
 					{ __( 'See more', 'woocommerce' ) }
 					<ExternalIcon size={ 18 } />
 				</Button>
@@ -291,6 +306,7 @@ export const PaymentGatewaySuggestions = ( { onComplete, query } ) => {
 					<WCPaySuggestion paymentGateway={ wcPayGateway[ 0 ] } />
 					<Toggle
 						heading={ __( 'Other payment methods', 'woocommerce' ) }
+						onToggle={ trackToggle }
 					>
 						{ enabledSection }
 						{ additionalSection }