add update payment details cypress test for Guardian Light

add Guardian Light to the list of products in the Billing story(book)

client/components/mma/billing/Billing.stories.tsx

@@ -12,6 +12,7 @@ import { guardianWeeklyCardInvoice } from '../../../fixtures/invoices';
 import { toMembersDataApiResponse } from '../../../fixtures/mdapiResponse';
 import {
 	digitalPackPaidByDirectDebit,
+	guardianLight,
 	guardianWeeklyPaidByCard,
 	newspaperVoucherPaidByPaypal,
 	tierThree,
@@ -67,6 +68,7 @@ export const WithSubscriptions: StoryObj<typeof Billing> = {
 						digitalPackPaidByDirectDebit(),
 						newspaperVoucherPaidByPaypal(),
 						tierThree(),
+						guardianLight(),
 					),
 				);
 			}),

cypress/tests/mocked/parallel-1/updatePaymentDetails.cy.ts

@@ -9,6 +9,7 @@ import { signInAndAcceptCookies } from '../../../lib/signInAndAcceptCookies';
 import {
 	digitalPackPaidByCardWithPaymentFailure,
 	digitalPackPaidByDirectDebit,
+	guardianLight,
 	guardianWeeklyPaidByCard,
 } from '../../../../client/fixtures/productBuilder/testProducts';
 import { singleContributionsAPIResponse } from '../../../../client/fixtures/singleContribution';
@@ -344,4 +345,87 @@ describe('Update payment details', () => {
 
 		cy.findByText('Recaptcha has not been completed.');
 	});
+
+	it.only('allows payment update for Guardian light product', () => {
+		cy.intercept('GET', '/api/me/mma*', {
+			statusCode: 200,
+			body: toMembersDataApiResponse(guardianLight()),
+		}).as('product_detail');
+
+		cy.intercept('GET', '/api/me/mma/**', {
+			statusCode: 200,
+			body: toMembersDataApiResponse(guardianLight()),
+		}).as('refetch_subscription');
+
+		cy.intercept('GET', '/mpapi/user/mobile-subscriptions', {
+			statusCode: 200,
+			body: { subscriptions: [] },
+		}).as('mobile_subscriptions');
+
+		cy.intercept('GET', '/api/me/one-off-contributions', {
+			statusCode: 200,
+			body: singleContributionsAPIResponse,
+		}).as('single_contributions');
+
+		cy.intercept('GET', '/api/cancelled/', {
+			statusCode: 200,
+			body: [],
+		}).as('cancelled');
+
+		cy.intercept('POST', '/api/payment/card', {
+			statusCode: 200,
+			body: stripeSetupIntent,
+		}).as('createSetupIntent');
+
+		cy.intercept('POST', '/api/payment/card/**', {
+			statusCode: 200,
+			body: executePaymentUpdateResponse,
+		}).as('update_payment');
+
+		cy.intercept('POST', 'https://api.stripe.com/v1/setup_intents/**', {
+			statusCode: 200,
+			body: { status: 'succeeded' },
+		}).as('confirmCardSetup');
+
+		cy.intercept('POST', 'https://api.stripe.com/v1/payment_methods', {
+			statusCode: 200,
+			body: paymentMethods,
+		});
+
+		cy.visit('/');
+		cy.wait('@product_detail');
+		cy.wait('@mobile_subscriptions');
+		cy.wait('@single_contributions');
+		cy.findByText('Manage support').click();
+		cy.wait('@cancelled');
+
+		cy.findByText('Update payment method').click();
+
+		cy.resolve('Stripe').should((value) => {
+			expect(value).to.be.ok;
+		});
+
+		cy.fillElementsInput('cardNumber', '4242424242424242');
+		cy.fillElementsInput('cardExpiry', '1025');
+		cy.fillElementsInput('cardCvc', '123');
+
+		cy.get('#recaptcha *> iframe').then(($iframe) => {
+			const $body = $iframe.contents().find('body');
+			cy.wrap($body)
+				.find('.recaptcha-checkbox-border')
+				.should('be.visible')
+				.click()
+				.then(() => {
+					// wait for recaptcha to resolve
+					cy.wait(1000);
+
+					cy.findByText('Update payment method').click();
+				});
+		});
+
+		cy.wait('@update_payment');
+		cy.wait('@refetch_subscription');
+
+		cy.findByText('Your payment details were updated successfully');
+	});
 });