Created a template for the secondary user product card in account overview

client/components/mma/accountoverview/AccountOverview.stories.tsx

@@ -37,6 +37,7 @@ import {
 	observerDelivery,
 	observerVoucherPaidByCard,
 	patronMembership,
+	secondaryDigitalPackSharedMembership,
 	supporterPlus,
 	supporterPlusAnnualCancelled,
 	supporterPlusCancelled,
@@ -134,6 +135,11 @@ export const WithSubscriptions: StoryObj<typeof AccountOverview> = {
 			http.get('/api/me/one-off-contributions', () => {
 				return HttpResponse.json([]);
 			}),
+			http.get('/api/secondary-user/me', () => {
+				return HttpResponse.json(
+					secondaryDigitalPackSharedMembership(),
+				);
+			}),
 		],
 	},
 };

client/components/mma/accountoverview/AccountOverview.tsx

@@ -58,6 +58,7 @@ import { EmptyAccountOverview } from './EmptyAccountOverview';
 import { InAppPurchaseCard } from './InAppPurchaseCard';
 import { PersonalisedHeader } from './PersonalisedHeader';
 import { ProductCard } from './ProductCard';
+import { SecondaryAccountProductCard } from './SecondaryAccountCard';
 import { SingleContributionCard } from './SingleContributionCard';
 
 export const isDigitalPlusUpgradeBannerFlagEnabled = (): boolean => {
@@ -161,6 +162,7 @@ const AccountOverviewPage = ({ isFromApp }: IsFromAppProps) => {
 		mpapiResponse,
 		singleContributionsResponse,
 		userSubscriptionsResponse,
+		maapiResponse,
 	} = useAccountDataLoader();
 
 	useEffect(() => {
@@ -211,6 +213,8 @@ const AccountOverviewPage = ({ isFromApp }: IsFromAppProps) => {
 		.filter(isProduct)
 		.sort(sortByJoinDate);
 
+	const secondaryAccountDetails = maapiResponse || null;
+
 	const activeProductsNotPendingCancellation = allActiveProductDetails.filter(
 		(product: ProductDetail) => !product.subscription.cancelledAt,
 	);
@@ -445,6 +449,14 @@ const AccountOverviewPage = ({ isFromApp }: IsFromAppProps) => {
 				/>
 			)}
 			{possiblyAffectedByCanadaPostStrike && <CanadaStrike />}
+			{secondaryAccountDetails && (
+				<Fragment>
+					<h2 css={subHeadingCss}>Shared with you</h2>
+					<SecondaryAccountProductCard
+						maapiResponse={secondaryAccountDetails}
+					/>
+				</Fragment>
+			)}
 			{uniqueProductCategories.map((category) => {
 				const groupedProductType = GROUPED_PRODUCT_TYPES[category];
 				const activeProductsInCategory = allActiveProductDetails.filter(

client/components/mma/accountoverview/ProductCardConfiguration.ts

@@ -46,6 +46,10 @@ const guardianWeeklyGiftBenefitsCopy = (npd: NextPaymentDetails) =>
 const guardianWeeklyBenefitsCopy = (npd: NextPaymentDetails) =>
 	`You're subscribed to The Guardian Weekly for ${npd.currentPriceValue} per ${npd.paymentInterval} and receive a curated news magazine featuring our best global journalism in print, as well as unlimited access to our full suite of digital benefits.`;
 
+// TODO This not having npd has been quite a problem. Current solution is a bit hacky.
+export const secondaryUserBenefitsCopy = () =>
+	`You're enjoying Digital plus as part of a shared subscription.`; // TODO make Digital plus part dynamic rather than hardcoded.
+
 /**
  * In-app purchases have their own dedicated product card component so are not
  * included in the configuration object.
@@ -134,3 +138,8 @@ export const getGuardianWeeklyGiftBenefitsCopy: ProductCardConfiguration = {
 	colour: productColour.guardianWeekly,
 	getBenefitsSectionCopy: guardianWeeklyGiftBenefitsCopy,
 };
+
+export const getSecondaryUserBenefitsCopy: ProductCardConfiguration = {
+	colour: productColour.digital,
+	getBenefitsSectionCopy: secondaryUserBenefitsCopy,
+};

client/components/mma/accountoverview/ProductCardSections.tsx

@@ -13,6 +13,7 @@ import type { FetchUpgradePreviewParams } from '@/client/utilities/hooks/useUpgr
 import { parseDate } from '@/shared/dates';
 import type {
 	MembersDataApiUser,
+	MultipleAccountsPrimaryUser,
 	PaidSubscriptionPlan,
 	ProductDetail,
 	SubscriptionPlan,
@@ -29,6 +30,7 @@ import type { ProductCardConfiguration } from './ProductCardConfiguration';
 import {
 	benefitsSectionBackgroundColour,
 	benefitsTextCss,
+	centeredActionCss,
 	centeredButtonCss,
 	giftRibbonColour,
 	giftRibbonCopyColour,
@@ -37,6 +39,8 @@ import {
 	productCardTitleCss,
 	productDetailLayoutCss,
 	sectionHeadingCss,
+	sharedMembershipLeaveButtonCss,
+	sharedMembershipTextCss,
 } from './ProductCardStyles';
 
 const NewPriceAlert = () => {
@@ -92,21 +96,25 @@ export const BenefitsCopyAndToggle = ({
 	mainPlan,
 	nextPaymentDetails,
 	overrideBenefits,
+	overrideBenefitsText,
 }: {
 	cardConfig: ProductCardConfiguration;
 	specificProductType: ProductType;
 	mainPlan: SubscriptionPlan;
-	nextPaymentDetails?: NextPaymentDetails | undefined;
+	nextPaymentDetails?: NextPaymentDetails;
 	overrideBenefits?: ProductBenefit[];
+	overrideBenefitsText?: string;
 }) =>
 	cardConfig.getBenefitsSectionCopy &&
-	nextPaymentDetails && (
+	(nextPaymentDetails || overrideBenefitsText) && (
 		<Card.Section
 			backgroundColor={benefitsSectionBackgroundColour}
 			removeBorders
 		>
 			<p css={benefitsTextCss}>
-				{cardConfig.getBenefitsSectionCopy(nextPaymentDetails)}
+				{nextPaymentDetails
+					? cardConfig.getBenefitsSectionCopy(nextPaymentDetails)
+					: overrideBenefitsText}
 			</p>
 			<BenefitsToggle
 				productType={specificProductType.productType}
@@ -135,6 +143,42 @@ export const GuardianAdLiteCopy = ({
 		</Card.Section>
 	);
 
+export const SecondaryUserSubscriptionDetails = ({
+	subscriptionName,
+	primarySubscriber,
+}: {
+	subscriptionName: string;
+	primarySubscriber: MultipleAccountsPrimaryUser | undefined;
+}) =>
+	primarySubscriber && (
+		<Card.Section>
+			<div css={productDetailLayoutCss}>
+				<div>
+					<h4 css={sectionHeadingCss}>Subscription details</h4>
+					<p css={sharedMembershipTextCss}>
+						Subscription: {subscriptionName} shared subscription{' '}
+						<br />
+						<br />
+						You’ve been given access by{' '}
+						{primarySubscriber.firstName}. Your account and activity
+						are private and not shared with the subscription owner.
+					</p>
+				</div>
+				<div css={centeredActionCss}>
+					<Button
+						aria-label={`${subscriptionName} : Leave shared subscription`}
+						size="small"
+						priority="tertiary"
+						cssOverrides={sharedMembershipLeaveButtonCss}
+						onClick={() => undefined}
+					>
+						Manage support
+					</Button>
+				</div>
+			</div>
+		</Card.Section>
+	);
+
 const StartDateRow = ({
 	subscriptionStartDate,
 	shouldShowStartDate,

client/components/mma/accountoverview/ProductCardStyles.ts

@@ -107,3 +107,18 @@ export const giftRibbonColour = (cardConfig: ProductCardConfiguration) =>
 	cardConfig.invertText ? palette.brand[400] : palette.brandAlt[400];
 export const giftRibbonCopyColour = (cardConfig: ProductCardConfiguration) =>
 	cardConfig.invertText ? palette.brandAlt[400] : palette.brand[400];
+
+export const sharedMembershipTextCss = css`
+	${textSans17};
+	margin: 0;
+`;
+
+export const centeredActionCss = css`
+	display: flex;
+	justify-content: flex-end;
+`;
+
+export const sharedMembershipLeaveButtonCss = css`
+	justify-content: flex-end;
+	background: transparent;
+`;

client/components/mma/accountoverview/SecondaryAccountCard.tsx

@@ -0,0 +1,60 @@
+import type { MultipleAccountsApiResponse } from '@/shared/productResponse';
+import { getSpecificProductTypeFromProductKey } from '@/shared/productResponse';
+import { Card } from '../shared/Card';
+import {
+	getSecondaryUserBenefitsCopy,
+	secondaryUserBenefitsCopy,
+} from './ProductCardConfiguration';
+import {
+	BenefitsCopyAndToggle,
+	ProductCardHeader,
+	SecondaryUserSubscriptionDetails,
+} from './ProductCardSections';
+
+export const SecondaryAccountProductCard = ({
+	maapiResponse,
+}: {
+	maapiResponse: MultipleAccountsApiResponse;
+}) => {
+	// TODO: This is a placeholder. We will likely need to adjust this.
+
+	// TODO Hard-coded atm
+	const specificProductType =
+		getSpecificProductTypeFromProductKey('Digital Pack');
+	const mainPlan = {
+		name: specificProductType.friendlyName,
+		shouldBeVisible: true,
+	};
+	if (!mainPlan) {
+		throw new Error('mainPlan does not exist in SecondaryAccountCard');
+	}
+	const productTitle =
+		specificProductType.productTitle(mainPlan) + ' shared subscription';
+	const cardConfig = getSecondaryUserBenefitsCopy;
+	const overrideBenefitsText = secondaryUserBenefitsCopy();
+
+	return (
+		<>
+			{maapiResponse.primaryUsers.map((primaryUser, index) => (
+				<Card key={index}>
+					<ProductCardHeader
+						cardConfig={cardConfig}
+						productTitle={productTitle}
+					/>
+
+					<BenefitsCopyAndToggle
+						cardConfig={cardConfig}
+						specificProductType={specificProductType}
+						mainPlan={mainPlan}
+						overrideBenefitsText={overrideBenefitsText}
+					/>
+
+					<SecondaryUserSubscriptionDetails
+						subscriptionName={productTitle}
+						primarySubscriber={primaryUser}
+					/>
+				</Card>
+			))}
+		</>
+	);
+};

client/fixtures/productBuilder/baseProducts.ts

@@ -1,4 +1,7 @@
-import type { ProductDetail } from '../../../shared/productResponse';
+import type {
+	MultipleAccountsApiResponse,
+	ProductDetail,
+} from '../../../shared/productResponse';
 
 // Base ProductTypes to support
 // 	| 'membership'
@@ -261,6 +264,19 @@ export function baseDigitalPack(): ProductDetail {
 	};
 }
 
+// TODO format still to be decided?
+export function baseSecondaryDigitalPack(): MultipleAccountsApiResponse {
+	return {
+		primaryUsers: [
+			{
+				firstName: 'John',
+				lastName: 'Doe',
+				email: 'john.doe@example.com',
+			},
+		],
+	};
+}
+
 export function baseContribution(): ProductDetail {
 	return {
 		mmaProductKey: 'Contributor',
@@ -1260,3 +1276,15 @@ export function baseTierThree(): ProductDetail {
 		isTestUser: false,
 	};
 }
+
+export function baseSecondaryUser(): MultipleAccountsApiResponse {
+	return {
+		primaryUsers: [
+			{
+				firstName: 'John',
+				lastName: 'Doe',
+				email: 'j.doe@example.com',
+			},
+		],
+	};
+}

client/fixtures/productBuilder/testProducts.ts

@@ -14,6 +14,7 @@ import {
 	baseNationalDeliveryPlus,
 	baseObserverDelivery,
 	basePatron,
+	baseSecondaryUser,
 	baseSupporterPlus,
 	baseTierThree,
 	baseVoucher,
@@ -69,6 +70,10 @@ export function digitalPackPaidByDirectDebit() {
 		.getProductDetailObject();
 }
 
+export function secondaryDigitalPackSharedMembership() {
+	return baseSecondaryUser();
+}
+
 export function digitalPackWithPaymentFailure() {
 	return new ProductBuilder(baseDigitalPack())
 		.payByDirectDebit()

client/stores/AccountStore.tsx

@@ -6,6 +6,7 @@ import type {
 	CancelledProductDetail,
 	MembersDataApiResponse,
 	MembersDataApiUser,
+	MultipleAccountsApiResponse,
 	SingleProductDetail,
 } from '../../shared/productResponse';
 import { isProduct } from '../../shared/productResponse';
@@ -34,6 +35,7 @@ interface AccountState {
 	mpapiResponse: MPAPIResponse | null;
 	singleContributionsResponse: SingleProductDetail[] | null;
 	userSubscriptionsResponse: UserSubscriptionsResponse | null;
+	maapiResponse: MultipleAccountsApiResponse | null;
 	loadingState: AccountLoadingState;
 	error: string | null;
 }
@@ -44,12 +46,14 @@ interface AccountActions {
 	setMpapiResponse: (response: MPAPIResponse) => void;
 	setSingleContributionsResponse: (response: SingleProductDetail[]) => void;
 	setUserSubscriptionsResponse: (response: UserSubscriptionsResponse) => void;
+	setMaapiResponse: (response: MultipleAccountsApiResponse) => void;
 	setAllResponses: (responses: {
 		mdapiResponse: MembersDataApiResponse | null;
 		cancelledProductsResponse: CancelledProductDetail[] | null;
 		mpapiResponse: MPAPIResponse | null;
 		singleContributionsResponse: SingleProductDetail[] | null;
 		userSubscriptionsResponse: UserSubscriptionsResponse | null;
+		maapiResponse: MultipleAccountsApiResponse | null;
 	}) => void;
 	setLoadingState: (state: AccountLoadingState) => void;
 	setError: (error: string | null) => void;
@@ -69,6 +73,7 @@ const initialState: AccountState = {
 	mpapiResponse: null,
 	singleContributionsResponse: null,
 	userSubscriptionsResponse: null,
+	maapiResponse: null,
 	loadingState: AccountLoadingState.NotStarted,
 	error: null,
 };
@@ -99,6 +104,8 @@ export const useAccountStore = create<AccountStore>()(
 					false,
 					'setUserSubscriptionsResponse',
 				),
+			setMaapiResponse: (response) =>
+				set({ maapiResponse: response }, false, 'setMaapiResponse'),
 			setAllResponses: (responses) =>
 				set(
 					{
@@ -110,6 +117,7 @@ export const useAccountStore = create<AccountStore>()(
 							responses.singleContributionsResponse,
 						userSubscriptionsResponse:
 							responses.userSubscriptionsResponse,
+						maapiResponse: responses.maapiResponse,
 						loadingState: AccountLoadingState.Loaded,
 						error: null,
 					},