Merge pull request #1493 from guardian/afs-distinct-products-by-subscription-id

Fix Payment Method Update Journey with Multiple Subscriptions of the Same Product

Author: andresilva-guardian

client/components/mma/paymentUpdate/PaymentDetailUpdate.tsx

@@ -333,6 +333,7 @@ export const PaymentDetailUpdate = (props: WithProductType<ProductType>) => {
 								),
 							newSubscriptionData,
 							isFromApp: isFromApp,
+							productDetail,
 						},
 					});
 				}
@@ -342,6 +343,7 @@ export const PaymentDetailUpdate = (props: WithProductType<ProductType>) => {
 					state: {
 						newPaymentMethodDetailFriendlyName:
 							newPaymentMethodDetail.friendlyName,
+						productDetail,
 					},
 				});
 			}
@@ -390,6 +392,7 @@ export const PaymentDetailUpdate = (props: WithProductType<ProductType>) => {
 								paymentMethodType={
 									StripeCheckoutSessionPaymentMethodType.Card
 								}
+								subscriptionId={subscription.subscriptionId}
 							/>
 						) : (
 							<CardInputForm

client/components/mma/paymentUpdate/PaymentDetailUpdateCheckoutSessionReturn.tsx

@@ -39,9 +39,14 @@ export const PaymentDetailUpdateCheckoutSessionReturn = () => {
 			state: {
 				newPaymentMethodDetailFriendlyName:
 					getNewPaymentMethodDetailFriendlyNameFromPaymentMethodType(),
+				productDetail,
 			},
 		});
-	}, [navigate, getNewPaymentMethodDetailFriendlyNameFromPaymentMethodType]);
+	}, [
+		navigate,
+		getNewPaymentMethodDetailFriendlyNameFromPaymentMethodType,
+		productDetail,
+	]);
 
 	const obtainCheckoutSessionDetails = useCallback(
 		async (id: string): Promise<StripeCheckoutSession> => {
@@ -100,6 +105,7 @@ export const PaymentDetailUpdateCheckoutSessionReturn = () => {
 							paymentMethodInfo:
 								checkoutSession?.setup_intent?.payment_method,
 							paymentMethodType,
+							productDetail,
 						},
 					});
 				})
@@ -120,6 +126,7 @@ export const PaymentDetailUpdateCheckoutSessionReturn = () => {
 	}, [
 		sessionId,
 		paymentMethodType,
+		productDetail,
 		navigate,
 		navigateToFailedPage,
 		obtainCheckoutSessionDetails,

client/components/mma/paymentUpdate/PaymentDetailUpdateContainer.tsx

@@ -1,6 +1,11 @@
 import type { Context } from 'react';
 import { createContext } from 'react';
-import { Navigate, Outlet, useLocation } from 'react-router-dom';
+import {
+	Navigate,
+	Outlet,
+	useLocation,
+	useSearchParams,
+} from 'react-router-dom';
 import type {
 	MembersDataApiResponse,
 	ProductDetail,
@@ -23,7 +28,8 @@ export interface PaymentUpdateContextInterface {
 }
 
 const renderContextAndOutletContainer =
-	(isFromApp?: boolean) => (mdapiResponse: MembersDataApiResponse) => {
+	(isFromApp?: boolean, subscriptionId?: string) =>
+	(mdapiResponse: MembersDataApiResponse) => {
 		const filteredProductDetails = mdapiResponse.products
 			.filter(isProduct)
 			.filter(
@@ -42,6 +48,26 @@ const renderContextAndOutletContainer =
 					<Outlet />
 				</PaymentUpdateContext.Provider>
 			);
+		} else if (subscriptionId) {
+			const filteredProductDetailsWithSubscriptionId =
+				filteredProductDetails.filter(
+					(productDetail) =>
+						productDetail.subscription.subscriptionId ===
+						subscriptionId,
+				);
+			if (filteredProductDetailsWithSubscriptionId.length === 1) {
+				return (
+					<PaymentUpdateContext.Provider
+						value={{
+							productDetail:
+								filteredProductDetailsWithSubscriptionId[0],
+							isFromApp,
+						}}
+					>
+						<Outlet />
+					</PaymentUpdateContext.Provider>
+				);
+			}
 		}
 		return <Navigate to="/" />;
 	};
@@ -61,6 +87,7 @@ export const PaymentDetailUpdateContainer = (
 		isFromApp?: boolean;
 	}
 
+	const [queryParameters] = useSearchParams();
 	const location = useLocation();
 	const routerState = location.state as LocationState;
 	const productDetail = routerState?.productDetail;
@@ -86,7 +113,10 @@ export const PaymentDetailUpdateContainer = (
 					fetch={createProductDetailFetcher(
 						props.productType.allProductsProductTypeFilterString,
 					)}
-					render={renderContextAndOutletContainer(isFromApp)}
+					render={renderContextAndOutletContainer(
+						isFromApp,
+						queryParameters.get('subscriptionId') ?? undefined, // for internal links we use the context instead of query params
+					)}
 					loadingMessage={`Retrieving current payment details for your ${props.productType.friendlyName}...`}
 				/>
 			)}

client/components/mma/paymentUpdate/card/StripeCheckoutSessionButton.tsx

@@ -7,6 +7,7 @@ import {
 import * as Sentry from '@sentry/browser';
 import type { PaymentMethod } from '@stripe/stripe-js';
 import { useState } from 'react';
+import type { StripeCreateCheckoutSessionRequest } from '@/shared/requests/stripe-create-checkout-session';
 import { STRIPE_PUBLIC_KEY_HEADER } from '../../../../../shared/stripeSetupIntent';
 import { LoadingCircleIcon } from '../../shared/assets/LoadingCircleIcon';
 
@@ -18,6 +19,7 @@ export interface StripeCheckoutSessionButtonProps {
 	stripeApiKey: string;
 	productTypeUrlPart: string;
 	paymentMethodType: StripeCheckoutSessionPaymentMethodType;
+	subscriptionId: string;
 }
 
 /**
@@ -48,16 +50,18 @@ export const StripeCheckoutSessionButton = (
 		setPreparingCheckout(true);
 
 		// Create Checkout Session on the server
+		const body: StripeCreateCheckoutSessionRequest = {
+			paymentMethodType: props.paymentMethodType,
+			productTypeUrlPart: props.productTypeUrlPart,
+			subscriptionId: props.subscriptionId,
+		};
 		fetch('/api/payment/checkout-session', {
 			method: 'POST',
 			credentials: 'include',
 			headers: {
 				[STRIPE_PUBLIC_KEY_HEADER]: props.stripeApiKey,
 			},
-			body: JSON.stringify({
-				paymentMethodType: props.paymentMethodType,
-				productTypeUrlPart: props.productTypeUrlPart,
-			}),
+			body: JSON.stringify(body),
 		})
 			.then((response) => {
 				if (response.ok) {

server/stripeCreateCheckoutSessionHandler.ts

@@ -1,6 +1,7 @@
 import * as Sentry from '@sentry/node';
 import type express from 'express';
 import fetch from 'node-fetch';
+import type { StripeCreateCheckoutSessionRequest } from '@/shared/requests/stripe-create-checkout-session';
 import { STRIPE_PUBLIC_KEY_HEADER } from '../shared/stripeSetupIntent';
 import { conf } from './config';
 import { log, putMetric } from './log';
@@ -18,10 +19,9 @@ export const stripeCreateCheckoutSessionHandler = async (
 	}
 
 	// Map request
-	const clientRequestBody: {
-		paymentMethodType: 'card';
-		productTypeUrlPart: string;
-	} = JSON.parse(clientRequestBodyData);
+	const clientRequestBody: StripeCreateCheckoutSessionRequest = JSON.parse(
+		clientRequestBodyData,
+	);
 
 	// Get Stripe Secret Key
 	stripeSetupIntentConfigPromise
@@ -48,7 +48,7 @@ export const stripeCreateCheckoutSessionHandler = async (
 			const outgoingURL = 'https://api.stripe.com/v1/checkout/sessions';
 			const requestBody = new URLSearchParams({
 				mode: 'setup',
-				success_url: `https://manage.${conf.DOMAIN}/payment/${clientRequestBody.productTypeUrlPart}/checkout-session-return?id={CHECKOUT_SESSION_ID}&paymentMethodType=${clientRequestBody.paymentMethodType}`,
+				success_url: `https://manage.${conf.DOMAIN}/payment/${clientRequestBody.productTypeUrlPart}/checkout-session-return?id={CHECKOUT_SESSION_ID}&paymentMethodType=${clientRequestBody.paymentMethodType}&subscriptionId=${clientRequestBody.subscriptionId}`,
 				cancel_url: `https://manage.${conf.DOMAIN}/payment/${clientRequestBody.productTypeUrlPart}`,
 				'payment_method_types[0]': clientRequestBody.paymentMethodType,
 				/**

shared/requests/stripe-create-checkout-session.ts

@@ -0,0 +1,5 @@
+export interface StripeCreateCheckoutSessionRequest {
+	paymentMethodType: 'card';
+	productTypeUrlPart: string;
+	subscriptionId: string;
+}