Merge remote-tracking branch 'origin/main' into rk/oauth-migration-idapi-aapi

Author: Raphael Kabo

.github/workflows/cypress-e2e.yml

@@ -1,5 +1,8 @@
 name: manage-frontend cypress (E2E)
 on:
+  push:
+    branches:
+      - main
   pull_request:
     branches:
       - main

README.md

@@ -20,7 +20,7 @@ DEV only Dependencies
 
 ## Dependencies
 
--   [`identity-frontend`](https://github.com/guardian/identity-frontend)
+-   [`gateway`](https://github.com/guardian/gateway)
 -   [IDAPI](https://github.com/guardian/identity)
 -   [`members-data-api`](https://github.com/guardian/members-data-api)
 -   [`holiday-stop-api` ](https://github.com/guardian/support-service-lambdas/tree/master/handlers/holiday-stop-api)
@@ -31,7 +31,11 @@ DEV only Dependencies
 
 ## Basic DEV environment
 
-NOTE: nginx proxies CODE instances of [`identity-frontend`](https://github.com/guardian/identity-frontend) for sign-in and [`members-data-api`](https://github.com/guardian/members-data-api) **if they're not running locally**. See sections further down if you need to actually develop either of those services in parallel with `manage-frontend`.
+NOTE: nginx proxies CODE instances of [`gateway`] for sign-in and [`members-data-api`](https://github.com/guardian/members-data-api) **if they're not running locally**. See sections further down if you need to actually develop either of those services in parallel with `manage-frontend`.
+
+**Note:** When using the local proxy, the sign-in flow for social logins (for example Google) doesn't quite work as the provider has no knowledge of the proxy and redirects back to CODE which doesn't know how to handle the request. The solution is to either use a username/password to sign in or if you need social login run [`gateway`] locally.
+
+[`gateway`]: https://github.com/guardian/gateway
 
 #### One-off setup
 

client/HelpCentrePage.ts

@@ -13,6 +13,8 @@ if (typeof window !== 'undefined' && window.guardian && window.guardian.dsn) {
 		release: WEBPACK_BUILD || 'local',
 		environment: window.guardian.domain,
 	});
+
+	Sentry.setTag('gu:referrer', document.referrer || 'none');
 }
 
 const element = document.getElementById('app');

client/__tests__/components/payment/cardFlow.test.tsx

@@ -17,7 +17,7 @@ const executePaymentUpdate = jest.fn((_: NewPaymentMethodDetail) =>
 	Promise.resolve(null),
 );
 
-const stripePaymentMethod: PaymentMethod | unknown = {
+const stripePaymentMethod: Partial<PaymentMethod> = {
 	id: 'stripePaymentMethodId',
 	created: 0,
 	card: {

client/components/helpCentre/HelpCentrePage.tsx

@@ -77,13 +77,7 @@ const HelpCentreRouter = () => {
 	]
 	*/
 
-	const knownIssues: KnownIssueObj[] = [
-		{
-			date: '4th Dec 2023 12:45',
-			message:
-				'Due to a technical issue, Customer Service phonelines in the USA & Canada are currently not available. Live chat and email are unaffected.',
-		},
-	];
+	const knownIssues: KnownIssueObj[] = [];
 
 	return (
 		<Main signInStatus={signInStatus} isHelpCentrePage>

client/components/helpCentre/liveChat/LiveChat.tsx

@@ -16,6 +16,7 @@ let areAgentsAvailable = false;
 
 const initESW = (
 	gslbBaseUrl: string | null,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Salesforce provides this object
 	liveChatAPI: any,
 	targetElement: HTMLElement,
 	identityID: string,

client/components/mma/MMAPage.tsx

@@ -35,7 +35,9 @@ import { Main } from '../shared/Main';
 import { DeliveryAddressUpdate } from './delivery/address/DeliveryAddressForm';
 import { Maintenance } from './maintenance/Maintenance';
 import { MMAPageSkeleton } from './MMAPageSkeleton';
+import { SignInError } from './signInError/SignInError';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Ophan events are diverse (and unguessable?)
 const record = (event: any) => {
 	if (window.guardian?.ophan?.record) {
 		window.guardian.ophan.record(event);
@@ -781,7 +783,13 @@ const MMARouter = () => {
 								<CreateReminder reminderType={'RECURRING'} />
 							}
 						/>
+						{/*Does not require sign in*/}
 						<Route path="/maintenance" element={<Maintenance />} />
+						{/*Does not require sign in*/}
+						<Route
+							path="/sign-in-error"
+							element={<SignInError />}
+						/>
 						<Route path="*" element={<Navigate to="/" />} />
 					</Routes>
 				</ErrorBoundary>

client/components/mma/accountoverview/manageProducts/ManageProductV2.tsx

@@ -93,6 +93,8 @@ const InnerContent = ({
 
 	const hasCancellationPending = productDetail.subscription.cancelledAt;
 
+	const isSelfServeCancellationAllowed = productDetail.selfServiceCancellation.isAllowed;
+
 	const cancelledCopy =
 		specificProductType.cancelledCopy || groupedProductType.cancelledCopy;
 
@@ -250,7 +252,7 @@ const InnerContent = ({
 							margin-left: ${space[5]}px;
 						`}
 					>
-						{!hasCancellationPending && (
+						{!hasCancellationPending && isSelfServeCancellationAllowed && (
 							<Button
 								priority="subdued"
 								onClick={() => {

client/components/mma/cancel/stages/ExecuteCancellation.tsx

@@ -110,7 +110,7 @@ const getCancellationSummaryWithReturnButton = (body: ReactNode) => () =>
 
 const getCaseUpdatingCancellationSummary =
 	(
-		caseId: string | '',
+		caseId: string,
 		productType: ProductTypeWithCancellationFlow,
 		cancelledProductDetail: ProductDetail,
 	) =>

client/components/mma/identity/idapi/avatar.ts

@@ -20,6 +20,7 @@ interface AvatarNotFoundError {
 type AvatarError = AvatarValidationError | AvatarNotFoundError;
 
 const isAvatarAPIErrorResponse = (
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we rely on Avatar returning something; we check to see if it is an error response
 	response: any,
 ): response is AvatarAPIErrorResponse => {
 	if (response.message && response.errors) {

client/components/mma/identity/idapi/user.ts

@@ -79,6 +79,7 @@ interface UserAPIErrorResponse {
 const getOrEmpty = (user: IdapiUserDetails) => (path: string) =>
 	get(user, path, '');
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we check input to see if it's a UserAPIErrorResponse object
 const isErrorResponse = (error: any): error is UserAPIErrorResponse => {
 	return error.status && error.status === 'error';
 };

client/components/mma/identity/publicProfile/AvatarSection.tsx

@@ -32,10 +32,12 @@ const imgCss = css({
 	width: '60px',
 });
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the argument object is an error object?
 const isEmptyAvatarError = (e: any): boolean => {
 	return e.type && e.type === ErrorTypes.NOT_FOUND;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the argument object is an error object?
 const errorHandler = (e: any) => {
 	if (isEmptyAvatarError(e)) {
 		return;
@@ -136,6 +138,7 @@ export const AvatarSection: FC<AvatarSectionProps> = (props) => {
 		</div>
 	);
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- the argument object might lack a message attribute
 	const getErrorMessage = (error: any) => {
 		let message;
 		if (error.type && error.type === ErrorTypes.VALIDATION) {

client/components/mma/identity/publicProfile/ProfileFormSection.tsx

@@ -12,6 +12,7 @@ import { textSmall } from '../sharedStyles';
 interface ProfileFormSectionProps {
 	user: User;
 	saveUser: (values: User) => Promise<User>;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the onError function's argument is an error object?
 	onError: (error: any) => void;
 	onSuccess: (user: User) => void;
 }

client/components/mma/identity/publicProfile/PublicProfile.tsx

@@ -24,6 +24,7 @@ export const PublicProfile = (_: { path?: string }) => {
 
 	const errorRef = createRef<GenericErrorMessageRef>();
 
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the argument object is an error object?
 	const handleGeneralError = (e: any) => {
 		setError(true);
 		Sentry.captureException(e);

client/components/mma/identity/settings/Settings.tsx

@@ -32,6 +32,7 @@ export const Settings = (_: { path?: string }) => {
 		}
 	}, [error]);
 
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the argument object is an error object?
 	const handleGeneralError = (e: any) => {
 		setError(true);
 		Sentry.captureException(e);

client/components/mma/identity/settings/SettingsFormSection.tsx

@@ -28,6 +28,7 @@ import { aCss, textSmall } from '../sharedStyles';
 interface SettingsFormProps {
 	user: User;
 	saveUser: (values: User) => Promise<User>;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the onError function's argument is an error object?
 	onError: (error: any) => void;
 	onSuccess: (input: User, response: User) => void;
 	onDone: () => void;

client/components/mma/identity/useAsyncSource.ts

@@ -8,6 +8,7 @@ enum ActionType {
 
 interface Action {
 	type: ActionType;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're assuming the payload attribute can contain a range of differently typed things?
 	payload?: any;
 }
 
@@ -19,12 +20,15 @@ enum FetchStatus {
 }
 
 interface ApiFetchState {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're assuming the data attribute can contain a range of differently typed things?
 	data: any;
 	error: string | null;
 	status: FetchStatus;
 }
 
 const ActionFetch = (): Action => ({ type: ActionType.FETCH });
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the ActionSuccess function's argument can contain a range of differently typed things?
 const ActionSuccess = (payload: any): Action => ({
 	type: ActionType.SUCCESS,
 	payload,
@@ -68,10 +72,14 @@ const reducer = (state: ApiFetchState, action: Action): ApiFetchState => {
 };
 
 export const useAsyncSource = (
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- the array can contain a range of differently typed things? And the promise is un-type-able?
 	getter: (...args: any[]) => Promise<any>,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the errorHandler function's argument is an error object?
 	errorHandler?: (e: any) => void,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- the array can contain a range of differently typed things?
 ): [ApiFetchState, (...args: any[]) => Promise<ApiFetchState>] => {
 	const [state, dispatch] = useReducer(reducer, initialState);
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're only assuming the doFetch function's argument can contain a range of differently typed things?
 	const doFetch = async (...args: any[]) => {
 		dispatch(ActionFetch());
 		try {

client/components/mma/identity/useConsentOptions.ts

@@ -15,6 +15,7 @@ enum ActionType {
 
 interface Action {
 	type: ActionType;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're assuming the payload attribute can contain a range of differently typed things?
 	payload?: any;
 }
 

client/components/mma/paymentUpdate/FieldWrapper.tsx

@@ -126,6 +126,7 @@ export class FieldWrapper extends React.Component<
 	}
 
 	private validateField =
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're assuming the argument object is an event object?
 		(otherOnChange?: (event: any) => void) =>
 		(field: { error: StripeError }) => {
 			if (otherOnChange) {

client/components/mma/paymentUpdate/NewPaymentMethodDetail.tsx

@@ -8,6 +8,7 @@ export interface NewPaymentMethodDetail {
 	readonly name: PaymentUpdateTypeName;
 	readonly apiUrlPart: PaymentUpdateTypeApiUrlPart;
 	readonly detailToPayloadObject: () => object;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're assuming the matchesResponse argument can be anything?
 	readonly matchesResponse: (response: any) => boolean;
 	readonly subHasExpectedPaymentType: (
 		subscription?: Subscription,

client/components/mma/shared/AsyncLoader.tsx

@@ -121,6 +121,7 @@ export class AsyncLoader<
 		trackEvent({
 			eventCategory: 'asyncLoader',
 			eventAction: 'error',
+			// eslint-disable-next-line @typescript-eslint/no-base-to-string -- Error.toString will output a string
 			eventLabel: error ? error.toString() : undefined,
 		});
 		Sentry.captureException(error);

client/components/mma/shared/asyncComponents/DefaultApiResponseHandler.tsx

@@ -14,7 +14,9 @@ export const TextResponseHandler: ResponseProcessor = (
 
 export function handleResponses(
 	response: Response | Response[],
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're assuming the transformResponse attribute's output can be of multiple types
 	transformResponse: (response: Response) => any,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we don't know the final output of the promise?
 ): Promise<any> {
 	if (hasBadResponse(response)) {
 		throw new Error('Invalid API response');
@@ -37,7 +39,8 @@ function hasBadResponse(responses: Response | Response[]) {
 	return !responses.ok;
 }
 
-function handleSingleResponse(response: Response, transformResponse: any) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- we're assuming the transformResponse argument's output can be of multiple types
+function handleSingleResponse(response: Response, transformResponse: (r: Response) => any) {
 	const locationHeader = response.headers.get('Location');
 	if (response.status === 401 && locationHeader && window !== undefined) {
 		window.location.replace(locationHeader);

client/components/mma/shared/asyncComponents/LoadingComponent.tsx

@@ -5,9 +5,11 @@ import {
 import type { ResponseProcessor } from './ResponseProcessor';
 
 export type LoadingProps = {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the final output of the promise
 	asyncFetch: () => Promise<any>;
 	responseProcessor: ResponseProcessor;
 	LoadingView: () => React.ReactElement;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the shape of the data argument
 	LoadedView: (data: any) => React.ReactElement;
 	ErrorView: () => React.ReactElement;
 };
@@ -19,6 +21,7 @@ export function LoadingComponent({
 	LoadedView,
 	ErrorView,
 }: LoadingProps) {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the final output of useAsyncLoader's returned promise
 	const { data, loadingState } = useAsyncLoader<any>(
 		asyncFetch,
 		responseProcessor,

client/components/mma/shared/asyncComponents/ResponseProcessor.tsx

@@ -1,3 +1,4 @@
 export interface ResponseProcessor {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- assume we don't know the final output of the promise
 	(resp: Response | Response[]): Promise<any>;
 }

client/components/mma/signInError/SignInError.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { ReactRouterDecorator } from '@/.storybook/ReactRouterDecorator';
+import { SignInError } from './SignInError';
+
+export default {
+	title: 'Pages/SignInError',
+	component: SignInError,
+	decorators: [ReactRouterDecorator],
+	parameters: {
+		layout: 'fullscreen',
+	},
+} as Meta<typeof SignInError>;
+
+export const Default: StoryFn<typeof SignInError> = () => <SignInError />;

client/components/mma/signInError/SignInError.tsx

@@ -0,0 +1,65 @@
+import { css } from '@emotion/react';
+import {
+	breakpoints,
+	from,
+	headline,
+	neutral,
+	space,
+	textSans,
+} from '@guardian/source-foundations';
+import { LinkButton } from '@guardian/source-react-components';
+import { conf } from '@/server/config';
+
+const containerStyle = css`
+	max-width: ${breakpoints.wide}px;
+	margin: 0 auto;
+	padding: ${space[12]}px 0;
+	border-left: 1px solid ${neutral[86]};
+	border-right: 1px solid ${neutral[86]};
+	height: 100%;
+`;
+
+const wrapperStyle = css`
+	margin: 0 10px;
+	max-width: ${breakpoints.mobileLandscape}px;
+	${from.tablet} {
+		margin: 0 20px;
+	}
+`;
+
+const headingStyle = css`
+	${headline.medium({ fontWeight: 'bold' })};
+	margin: 0;
+	padding-bottom: ${space[4]}px;
+	border-bottom: 1px solid ${neutral['86']};
+`;
+
+const grafStyle = css`
+	${textSans.medium()};
+	margin-top: ${space[4]}px;
+	margin-bottom: ${space[4]}px;
+`;
+
+export const SignInError = () => {
+	const domain =
+		typeof window !== 'undefined' && window.guardian
+			? window.guardian.domain
+			: conf.DOMAIN;
+	const signOutUrl = `https://profile.${domain}/signout?returnUrl=${encodeURIComponent(
+		`https://manage.${domain}/`,
+	)}`;
+
+	return (
+		<div css={containerStyle}>
+			<section css={wrapperStyle}>
+				<h1 css={headingStyle}>Sign in error</h1>
+				<p css={grafStyle}>
+					There's been a problem signing you in. Please sign in again
+					to continue managing your account.
+				</p>
+
+				<LinkButton href={signOutUrl}>Continue</LinkButton>
+			</section>
+		</div>
+	);
+};

client/components/shared/SectionContent.tsx

@@ -84,7 +84,7 @@ const divCss = (hasNav: boolean | undefined) => css`
 
 export const SelectedTopicObjectContext = createContext<
 	Dispatch<SetStateAction<string | undefined>>
->(undefined!); // eslint-disable-line @typescript-eslint/no-non-null-assertion -- // TODO: refactor this var to remove need for disabling eslint rule
+>(undefined!);  
 
 export const SectionContent = (props: SectionContentProps) => {
 	const [selectedTopicId, setSelectedTopicId] = useState<string | undefined>(