Add Extra accounts page and invitation management UI

client/components/mma/MMAPage.tsx

@@ -46,6 +46,12 @@ const AccountOverview = lazyWithRetry(() =>
 	).then(({ AccountOverview }) => ({ default: AccountOverview })),
 );
 
+const ExtraAccounts = lazyWithRetry(() =>
+	import(
+		/* webpackChunkName: "ExtraAccounts" */ './extraAccounts/ExtraAccounts'
+	).then(({ ExtraAccounts }) => ({ default: ExtraAccounts })),
+);
+
 const Billing = lazyWithRetry(() =>
 	import(/* webpackChunkName: "Billing" */ './billing/Billing').then(
 		({ Billing }) => ({ default: Billing }),
@@ -576,6 +582,11 @@ const MMARouter = () => {
 							element={<AccountOverview isFromApp />}
 						/>
 
+						<Route
+							path="/extra-accounts"
+							element={<ExtraAccounts />}
+						/>
+
 						<Route path="/billing" element={<Billing />} />
 						{Object.values(PRODUCT_TYPES).map(
 							(productType: ProductType) => (

client/components/mma/MMAPageSkeleton.tsx

@@ -92,6 +92,11 @@ const MMALocationObjectArr: LocationObject[] = [
 		path: '/',
 		selectedNavItem: NAV_LINKS.accountOverview,
 	},
+	{
+		title: 'Extra accounts',
+		path: '/extra-accounts',
+		selectedNavItem: NAV_LINKS.extraAccounts,
+	},
 	{
 		title: 'Billing',
 		path: '/billing',

client/components/mma/accountoverview/AccountOverview.tsx

@@ -35,6 +35,7 @@ import {
 	GROUPED_PRODUCT_TYPES,
 	PRODUCT_TYPES,
 } from '../../../../shared/productTypes';
+import { isExtraAccountsFlagEnabled } from '../../../utilities/extraAccounts';
 import { useAccountDataLoader } from '../../../utilities/hooks/useAccountDataLoader';
 import { useUpgradeProduct } from '../../../utilities/hooks/useUpgradePreview';
 import { GenericErrorScreen } from '../../shared/GenericErrorScreen';
@@ -47,6 +48,7 @@ import { DigitalPlusUpgradeBanner } from '../shared/DigitalPlusUpgradeBanner';
 import { DownloadAppCtaVariation1 } from '../shared/DownloadAppCtaVariation1';
 import { DownloadEditionsAppCtaWithImage } from '../shared/DownloadEditionsAppCtaWithImage';
 import { DownloadFeastAppCtaWithImage } from '../shared/DownloadFeastAppCtaWithImage';
+import { ExtraAccountsBanner } from '../shared/ExtraAccountsBanner';
 import type { IsFromAppProps } from '../shared/IsFromAppProps';
 import { NewspaperArchiveCta } from '../shared/NewspaperArchiveCta';
 import { nonServiceableCountries } from '../shared/NonServiceableCountries';
@@ -120,6 +122,11 @@ export const BenefitsCtas = ({ email, productKeys }: BenefitsCtasProps) => {
 
 	return (
 		<>
+			{/* TODO: remove the isExtraAccountsFlagEnabled() query-param check
+			   once the Extra accounts feature ships; gate on Digital plus only. */}
+			{hasDigitalPack && isExtraAccountsFlagEnabled() && (
+				<ExtraAccountsBanner />
+			)}
 			{(hasDigitalPlusPrint ||
 				isPlusDigitalProduct ||
 				hasGuardianEmail ||

client/components/mma/extraAccounts/ExtraAccountCancelInvitationModal.stories.tsx

@@ -0,0 +1,81 @@
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+import { fn } from '@storybook/test';
+import type { ExtraAccount } from '../../../stores/ExtraAccountsStore';
+import { ToastContainer } from '../../shared/ToastContainer';
+import { ExtraAccountCancelInvitationModal } from './ExtraAccountCancelInvitationModal';
+
+const ToastDecorator: Decorator = (Story) => (
+	<>
+		<Story />
+		<ToastContainer />
+	</>
+);
+
+const pendingAccount: ExtraAccount = {
+	status: 'pending',
+	email: 'pending@example.com',
+	invitationCode: 'INV-001',
+};
+
+const activeAccount: ExtraAccount = {
+	status: 'active',
+	email: 'active@example.com',
+	name: 'Alex Active',
+	secondaryIdentityId: 'secondary-active',
+};
+
+const mockCancelInvitation = fn(async () => true);
+const mockRemoveAccess = fn(async () => true);
+
+export default {
+	title: 'Components/ExtraAccountCancelInvitationModal',
+	component: ExtraAccountCancelInvitationModal,
+	decorators: [ToastDecorator],
+	args: {
+		cancelInvitation: mockCancelInvitation,
+		removeAccess: mockRemoveAccess,
+		isSubmitting: false,
+		remainingInvitations: 1,
+	},
+} as Meta<typeof ExtraAccountCancelInvitationModal>;
+
+export const CancelInvitationClosed: StoryObj<
+	typeof ExtraAccountCancelInvitationModal
+> = {
+	args: {
+		account: pendingAccount,
+	},
+};
+
+export const CancelInvitationOpen: StoryObj<
+	typeof ExtraAccountCancelInvitationModal
+> = {
+	args: {
+		account: pendingAccount,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByText('Cancel invitation'));
+	},
+};
+
+export const RemoveAccessClosed: StoryObj<
+	typeof ExtraAccountCancelInvitationModal
+> = {
+	args: {
+		account: activeAccount,
+	},
+};
+
+export const RemoveAccessOpen: StoryObj<
+	typeof ExtraAccountCancelInvitationModal
+> = {
+	args: {
+		account: activeAccount,
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByText('Remove access'));
+	},
+};