A4A: Add 'Manage team members' KB links and track events. (#94322)

* Add KB links and track events.

* Make track events more unique.

client/a8c-for-agencies/components/a4a-request-wp-admin-access/index.tsx

@@ -2,13 +2,21 @@ import { Button } from '@wordpress/components';
 import { Icon, external } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import illustration from 'calypso/assets/images/a8c-for-agencies/request-wp-admin-access-illustration.svg';
+import { useDispatch } from 'calypso/state';
+import { recordTracksEvent } from 'calypso/state/analytics/actions';
 
 import './style.scss';
 
 export function A4ARequestWPAdminAccess() {
 	const translate = useTranslate();
+	const dispatch = useDispatch();
 
-	const kbArticleUrl = '#'; // FIXME: Add the correct URL
+	const onLearnMoreClick = () => {
+		dispatch( recordTracksEvent( 'calypso_a4a_team_learn_more_wp_admin_access_click' ) );
+	};
+
+	const kbArticleUrl =
+		'https://agencieshelp.automattic.com/knowledge-base/invite-and-manage-team-members/#allowing-team-members-to-access-wp-admin';
 
 	return (
 		<div className="a4a-request-wp-admin-access">
@@ -29,6 +37,7 @@ export function A4ARequestWPAdminAccess() {
 					variant="link"
 					className="a4a-request-wp-admin-access__learn-more-button"
 					href={ kbArticleUrl }
+					onClick={ onLearnMoreClick }
 					target="_blank"
 				>
 					<>

client/a8c-for-agencies/sections/team/primary/get-started/index.tsx

@@ -26,6 +26,10 @@ export default function GetStarted() {
 		dispatch( recordTracksEvent( 'calypso_a4a_team_invite_team_member_click' ) );
 	};
 
+	const onLearnMoreClick = () => {
+		dispatch( recordTracksEvent( 'calypso_a4a_team_learn_more_managing_members_click' ) );
+	};
+
 	return (
 		<Layout className="team-list-get-started" title={ title } wide compact>
 			<LayoutTop>
@@ -83,7 +87,8 @@ export default function GetStarted() {
 						className="team-list-get-started__learn-more-button"
 						variant="link"
 						target="_blank"
-						href="#" // FIXME: Add link to the KB article
+						href="https://agencieshelp.automattic.com/knowledge-base/invite-and-manage-team-members"
+						onClick={ onLearnMoreClick }
 					>
 						{ translate( 'Team members Knowledge Base article' ) }
 						<Icon icon={ external } size={ 18 } />

client/a8c-for-agencies/sections/team/primary/team-accept-invite/no-multi-agency-message.tsx

@@ -7,7 +7,9 @@ import {
 } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import StepSection from 'calypso/a8c-for-agencies/sections/referrals/common/step-section';
 import StepSectionItem from 'calypso/a8c-for-agencies/sections/referrals/common/step-section-item';
+import { useDispatch } from 'calypso/state';
 import { Agency } from 'calypso/state/a8c-for-agencies/types';
+import { recordTracksEvent } from 'calypso/state/analytics/actions';
 
 type Props = {
 	currentAgency: Agency;
@@ -16,6 +18,11 @@ type Props = {
 
 export default function NoMultiAgencyMessage( { currentAgency, targetAgency }: Props ) {
 	const translate = useTranslate();
+	const dispatch = useDispatch();
+
+	const onLearnMoreClick = () => {
+		dispatch( recordTracksEvent( 'calypso_a4a_team_learn_more_joining_agency_click' ) );
+	};
 
 	return (
 		<>
@@ -89,7 +96,8 @@ export default function NoMultiAgencyMessage( { currentAgency, targetAgency }: P
 					className="team-accept-invite__learn-more-button"
 					variant="link"
 					target="_blank"
-					href="#" // FIXME: Add link to the KB article
+					href="https://agencieshelp.automattic.com/knowledge-base/invite-and-manage-team-members/#accepting-an-invitation-a-team-member-s-guide"
+					onClick={ onLearnMoreClick }
 				>
 					{ translate( 'Team members Knowledge Base article' ) }
 					<Icon icon={ external } size={ 18 } />