A4A > WooPayments: Implement Overview page

client/a8c-for-agencies/components/a4a-contact-support-widget/get-default-product.ts

@@ -2,15 +2,15 @@ import {
 	A4A_MARKETPLACE_HOSTING_PRESSABLE_LINK,
 	A4A_MIGRATIONS_MIGRATE_TO_PRESSABLE_LINK,
 	A4A_MIGRATIONS_MIGRATE_TO_WPCOM_LINK,
-	A4A_WOOPAYMENTS_DASHBOARD_LINK,
+	A4A_WOOPAYMENTS_OVERVIEW_LINK,
 } from '../sidebar-menu/lib/constants';
 
 // This map is used to determine the product when the user is on a specific page to preselect the product in the form.
 const pathToProductMap: Record< string, string > = {
 	[ A4A_MARKETPLACE_HOSTING_PRESSABLE_LINK ]: 'pressable',
 	[ A4A_MIGRATIONS_MIGRATE_TO_PRESSABLE_LINK ]: 'pressable',
 	[ A4A_MIGRATIONS_MIGRATE_TO_WPCOM_LINK ]: 'wpcom',
-	[ A4A_WOOPAYMENTS_DASHBOARD_LINK ]: 'woo',
+	[ A4A_WOOPAYMENTS_OVERVIEW_LINK ]: 'woo',
 };
 
 export default function getDefaultProduct(): string {

client/a8c-for-agencies/components/sidebar-menu/hooks/use-woopayments-menu-items.tsx

@@ -1,4 +1,4 @@
-import { category, cog } from '@wordpress/icons';
+import { category, cog, home } from '@wordpress/icons';
 import { useTranslate } from 'i18n-calypso';
 import { useMemo } from 'react';
 import StatusBadge from 'calypso/a8c-for-agencies/components/step-section-item/status-badge';
@@ -8,6 +8,7 @@ import {
 	A4A_WOOPAYMENTS_LINK,
 	A4A_WOOPAYMENTS_DASHBOARD_LINK,
 	A4A_WOOPAYMENTS_PAYMENT_SETTINGS_LINK,
+	A4A_WOOPAYMENTS_OVERVIEW_LINK,
 } from '../lib/constants';
 import { createItem } from '../lib/utils';
 
@@ -21,6 +22,18 @@ const useWooPaymentsMenuItems = ( path: string ) => {
 
 	const menuItems = useMemo( () => {
 		return [
+			createItem(
+				{
+					icon: home,
+					path: A4A_WOOPAYMENTS_LINK,
+					link: A4A_WOOPAYMENTS_OVERVIEW_LINK,
+					title: translate( 'Overview' ),
+					trackEventProps: {
+						menu_item: 'Automattic for Agencies / WooPayments / Overview',
+					},
+				},
+				path
+			),
 			createItem(
 				{
 					icon: category,

client/a8c-for-agencies/components/sidebar-menu/lib/constants.ts

@@ -54,6 +54,7 @@ export const A4A_WOOPAYMENTS_LINK = '/woopayments';
 export const A4A_WOOPAYMENTS_DASHBOARD_LINK = `${ A4A_WOOPAYMENTS_LINK }/dashboard`;
 export const A4A_WOOPAYMENTS_PAYMENT_SETTINGS_LINK = `${ A4A_WOOPAYMENTS_LINK }/payment-settings`;
 export const A4A_WOOPAYMENTS_SITE_SETUP_LINK = `${ A4A_WOOPAYMENTS_LINK }/site-setup`;
+export const A4A_WOOPAYMENTS_OVERVIEW_LINK = `${ A4A_WOOPAYMENTS_LINK }/overview`;
 
 // Client
 export const A4A_CLIENT_LANDING_LINK = '/client/landing';

client/a8c-for-agencies/components/step-section-item/index.tsx

@@ -20,6 +20,7 @@ interface StepSectionItemProps {
 	iconClassName?: string;
 	isNewLayout?: boolean;
 	stepNumber?: number;
+	children?: React.ReactNode;
 }
 
 export default function StepSectionItem( {
@@ -32,6 +33,7 @@ export default function StepSectionItem( {
 	iconClassName,
 	isNewLayout = false,
 	stepNumber,
+	children,
 }: StepSectionItemProps ) {
 	const status = <StatusBadge statusProps={ statusProps } />;
 
@@ -64,6 +66,7 @@ export default function StepSectionItem( {
 				{ ! isNewLayout && buttonContent }
 			</div>
 			{ isNewLayout ? buttonContent : statusContent }
+			{ children }
 		</div>
 	);
 }

client/a8c-for-agencies/lib/permission.ts

@@ -48,6 +48,7 @@ import {
 	A4A_WOOPAYMENTS_DASHBOARD_LINK,
 	A4A_WOOPAYMENTS_PAYMENT_SETTINGS_LINK,
 	A4A_WOOPAYMENTS_SITE_SETUP_LINK,
+	A4A_WOOPAYMENTS_OVERVIEW_LINK,
 } from '../components/sidebar-menu/lib/constants';
 import type { Agency } from 'calypso/state/a8c-for-agencies/types';
 
@@ -102,6 +103,7 @@ const MEMBER_ACCESSIBLE_PATHS: Record< string, string[] > = {
 	[ A4A_WOOPAYMENTS_DASHBOARD_LINK ]: [ 'a4a_read_referrals' ],
 	[ A4A_WOOPAYMENTS_PAYMENT_SETTINGS_LINK ]: [ 'a4a_read_referrals' ],
 	[ A4A_WOOPAYMENTS_SITE_SETUP_LINK ]: [ 'a4a_read_referrals' ],
+	[ A4A_WOOPAYMENTS_OVERVIEW_LINK ]: [ 'a4a_read_referrals' ],
 };
 
 const MEMBER_ACCESSIBLE_DYNAMIC_PATHS: Record< string, string[] > = {

client/a8c-for-agencies/sections/woopayments/add-woopayments-to-site/index.tsx

@@ -1,6 +1,8 @@
+import page from '@automattic/calypso-router';
 import { Button } from '@wordpress/components';
+import { getQueryArg, removeQueryArgs } from '@wordpress/url';
 import { useTranslate } from 'i18n-calypso';
-import { useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useDispatch } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions';
 import AddWooPaymentsToSiteModal from './modal';
@@ -9,12 +11,25 @@ const AddWooPaymentsToSite = () => {
 	const translate = useTranslate();
 	const dispatch = useDispatch();
 
+	const showModal = getQueryArg( window.location.href, 'add-woopayments-to-site' ) === 'true';
 	const [ isOpen, setIsOpen ] = useState( false );
 
-	const handleOpenModal = () => {
+	const handleOpenModal = useCallback( () => {
 		setIsOpen( true );
 		dispatch( recordTracksEvent( 'calypso_a4a_woopayments_add_site_button_click' ) );
-	};
+	}, [ dispatch ] );
+
+	useEffect( () => {
+		if ( showModal ) {
+			handleOpenModal();
+			page.redirect(
+				removeQueryArgs(
+					window.location.pathname + window.location.search,
+					'add-woopayments-to-site'
+				)
+			);
+		}
+	}, [ handleOpenModal, showModal ] );
 
 	return (
 		<>

client/a8c-for-agencies/sections/woopayments/controller.tsx

@@ -1,10 +1,30 @@
 import { type Callback } from '@automattic/calypso-router';
 import PageViewTracker from 'calypso/a8c-for-agencies/components/a4a-page-view-tracker';
 import WooPaymentsSidebar from 'calypso/a8c-for-agencies/components/sidebar-menu/woopayments';
+import SidebarPlaceholder from 'calypso/a8c-for-agencies/components/sidebar-placeholder';
 import ReferralsBankDetails from '../referrals/primary/bank-details';
+import WooPaymentsLanding from './primary/woopayment-landing';
 import WooPaymentsDashboard from './primary/woopayments-dashboard';
+import WooPaymentsOverview from './primary/woopayments-overview';
 import WooPaymentsSiteSetup from './primary/woopayments-site-setup';
 
+export const wooPaymentsLandingContext: Callback = ( context, next ) => {
+	context.primary = <WooPaymentsLanding />;
+	context.secondary = <SidebarPlaceholder />;
+	next();
+};
+
+export const woopaymentsOverviewContext: Callback = ( context, next ) => {
+	context.primary = (
+		<>
+			<PageViewTracker title="WooPayments > Overview" path={ context.path } />
+			<WooPaymentsOverview />
+		</>
+	);
+	context.secondary = <WooPaymentsSidebar path={ context.path } />;
+	next();
+};
+
 export const woopaymentsDashboardContext: Callback = ( context, next ) => {
 	context.primary = (
 		<>

client/a8c-for-agencies/sections/woopayments/index.tsx

@@ -4,16 +4,26 @@ import {
 	A4A_WOOPAYMENTS_LINK,
 	A4A_WOOPAYMENTS_PAYMENT_SETTINGS_LINK,
 	A4A_WOOPAYMENTS_SITE_SETUP_LINK,
+	A4A_WOOPAYMENTS_OVERVIEW_LINK,
 } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import { requireAccessContext } from 'calypso/a8c-for-agencies/controller';
 import { makeLayout, render as clientRender } from 'calypso/controller';
 import {
+	wooPaymentsLandingContext,
+	woopaymentsOverviewContext,
 	woopaymentsDashboardContext,
 	woopaymentsPaymentSettingsContext,
 	woopaymentsSiteSetupContext,
 } from './controller';
 
 export default function () {
+	page(
+		A4A_WOOPAYMENTS_OVERVIEW_LINK,
+		requireAccessContext,
+		woopaymentsOverviewContext,
+		makeLayout,
+		clientRender
+	);
 	page(
 		A4A_WOOPAYMENTS_DASHBOARD_LINK,
 		requireAccessContext,
@@ -35,5 +45,5 @@ export default function () {
 		makeLayout,
 		clientRender
 	);
-	page( A4A_WOOPAYMENTS_LINK, () => page.redirect( A4A_WOOPAYMENTS_DASHBOARD_LINK ) );
+	page( A4A_WOOPAYMENTS_LINK, wooPaymentsLandingContext, makeLayout, clientRender );
 }

client/a8c-for-agencies/sections/woopayments/primary/woopayment-landing/index.tsx

@@ -0,0 +1,41 @@
+import page from '@automattic/calypso-router';
+import { useTranslate } from 'i18n-calypso';
+import { useEffect } from 'react';
+import PagePlaceholder from 'calypso/a8c-for-agencies/components/page-placeholder';
+import {
+	A4A_WOOPAYMENTS_DASHBOARD_LINK,
+	A4A_WOOPAYMENTS_OVERVIEW_LINK,
+} from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import useFetchAllLicenses from 'calypso/a8c-for-agencies/data/purchases/use-fetch-all-licenses';
+import {
+	LicenseFilter,
+	LicenseSortField,
+	LicenseSortDirection,
+} from 'calypso/jetpack-cloud/sections/partner-portal/types';
+
+const WooPaymentsLanding = () => {
+	const translate = useTranslate();
+	const title = translate( 'WooPayments Commissions' );
+
+	const { data: licensesWithWooPayments, isFetched } = useFetchAllLicenses(
+		LicenseFilter.Attached,
+		'woopayments',
+		LicenseSortField.IssuedAt,
+		LicenseSortDirection.Descending
+	);
+
+	useEffect( () => {
+		if ( ! isFetched ) {
+			return;
+		}
+		if ( licensesWithWooPayments?.items?.length ) {
+			page.redirect( A4A_WOOPAYMENTS_DASHBOARD_LINK );
+			return;
+		}
+		page.redirect( A4A_WOOPAYMENTS_OVERVIEW_LINK );
+	}, [ licensesWithWooPayments, isFetched ] );
+
+	return <PagePlaceholder title={ title } />;
+};
+
+export default WooPaymentsLanding;