A4A > Migrations: Update Payment Settings page (#96276)

* Update the Migrations Payment Settings page * update sidebar menu icon
Automattic · Nov 13, 2024 · 10dd654 · 10dd654
1 parent 893ca0b
commit 10dd654
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 20 deletions.
diff --git a/client/a8c-for-agencies/components/sidebar-menu/hooks/use-migrations-menu-items.tsx b/client/a8c-for-agencies/components/sidebar-menu/hooks/use-migrations-menu-items.tsx
@@ -1,4 +1,4 @@
-import { category, cog, help } from '@wordpress/icons';
+import { category, cog, currencyDollar } 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';
@@ -36,7 +36,7 @@ const useMigrationsMenuItems = ( path: string ) => {
 			),
 			createItem(
 				{
-					icon: help,
+					icon: currencyDollar,
 					path: A4A_MIGRATIONS_LINK,
 					link: A4A_MIGRATIONS_COMMISSIONS_LINK,
 					title: translate( 'Commissions' ),

diff --git a/client/a8c-for-agencies/sections/migrations/controller.tsx b/client/a8c-for-agencies/sections/migrations/controller.tsx
@@ -45,7 +45,7 @@ export const migrationsPaymentSettingsContext: Callback = ( context, next ) => {
 	context.primary = (
 		<>
 			<PageViewTracker title="Migrations > Payment Settings" path={ context.path } />
-			<ReferralsBankDetails isAutomatedReferral />
+			<ReferralsBankDetails isAutomatedReferral isMigrations />
 		</>
 	);
 	context.secondary = <MigrationsSidebar path={ context.path } />;

diff --git a/client/a8c-for-agencies/sections/migrations/index.tsx b/client/a8c-for-agencies/sections/migrations/index.tsx
@@ -11,14 +11,6 @@ import { makeLayout, render as clientRender } from 'calypso/controller';
 import * as controller from './controller';
 
 export default function () {
-	page(
-		A4A_MIGRATIONS_LINK,
-		requireAccessContext,
-		controller.migrationsContext,
-		makeLayout,
-		clientRender
-	);
-
 	if ( isEnabled( 'a4a-tracking-site-migrations' ) ) {
 		page(
 			A4A_MIGRATIONS_OVERVIEW_LINK,
@@ -42,5 +34,13 @@ export default function () {
 			clientRender
 		);
 		page( A4A_MIGRATIONS_LINK, () => page.redirect( A4A_MIGRATIONS_OVERVIEW_LINK ) );
+	} else {
+		page(
+			A4A_MIGRATIONS_LINK,
+			requireAccessContext,
+			controller.migrationsContext,
+			makeLayout,
+			clientRender
+		);
 	}
 }
diff --git a/client/a8c-for-agencies/sections/referrals/primary/bank-details/index.tsx b/client/a8c-for-agencies/sections/referrals/primary/bank-details/index.tsx
@@ -10,7 +10,10 @@ import LayoutHeader, {
 } from 'calypso/a8c-for-agencies/components/layout/header';
 import LayoutTop from 'calypso/a8c-for-agencies/components/layout/top';
 import MobileSidebarNavigation from 'calypso/a8c-for-agencies/components/sidebar/mobile-sidebar-navigation';
-import { A4A_REFERRALS_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+import {
+	A4A_REFERRALS_LINK,
+	A4A_MIGRATIONS_LINK,
+} from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
 import StatusBadge from 'calypso/a8c-for-agencies/components/step-section-item/status-badge';
 import TextPlaceholder from 'calypso/a8c-for-agencies/components/text-placeholder';
 import useGetTipaltiIFrameURL from '../../hooks/use-get-tipalti-iframe-url';
@@ -21,8 +24,10 @@ import './style.scss';
 
 export default function ReferralsBankDetails( {
 	isAutomatedReferral = false,
+	isMigrations = false,
 }: {
 	isAutomatedReferral?: boolean;
+	isMigrations?: boolean;
 } ) {
 	const translate = useTranslate();
 	const isDesktop = useDesktopBreakpoint();
@@ -33,10 +38,14 @@ export default function ReferralsBankDetails( {
 		? translate( 'Your referrals and commissions: Set up secure payments' )
 		: translate( 'Payment Settings' );
 
-	const title = isAutomatedReferral
+	let title = isAutomatedReferral
 		? automatedReferralTitle
 		: translate( 'Referrals: Add bank details' );
 
+	if ( isMigrations ) {
+		title = translate( 'Migrations: Payment Settings' );
+	}
+
 	const { data, isFetching } = useGetTipaltiIFrameURL();
 	const { data: tipaltiData } = useGetTipaltiPayee();
 
@@ -58,6 +67,18 @@ export default function ReferralsBankDetails( {
 		};
 	}, [] );
 
+	let mainPageBreadCrumb = {
+		label:
+			isAutomatedReferral && isDesktop
+				? translate( 'Your referrals and commissions' )
+				: translate( 'Referrals' ),
+		href: A4A_REFERRALS_LINK,
+	};
+
+	if ( isMigrations ) {
+		mainPageBreadCrumb = { label: translate( 'Migrations' ), href: A4A_MIGRATIONS_LINK };
+	}
+
 	return (
 		<Layout
 			className={ clsx( 'bank-details__layout', {
@@ -71,13 +92,7 @@ export default function ReferralsBankDetails( {
 				<LayoutHeader>
 					<Breadcrumb
 						items={ [
-							{
-								label:
-									isAutomatedReferral && isDesktop
-										? translate( 'Your referrals and commissions' )
-										: translate( 'Referrals' ),
-								href: A4A_REFERRALS_LINK,
-							},
+							mainPageBreadCrumb,
 							{
 								label: isAutomatedReferral
 									? translate( 'Set up secure payments' )