Revert "Merge branch 'main' into ahe/random-todos"

This reverts commit a4696f5, reversing
changes made to 8602de0.

README.md

@@ -20,7 +20,7 @@ DEV only Dependencies
 
 ## Dependencies
 
--   [`gateway`](https://github.com/guardian/gateway)
+-   [`identity-frontend`](https://github.com/guardian/identity-frontend)
 -   [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,11 +31,7 @@ DEV only Dependencies
 
 ## Basic DEV environment
 
-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
+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`.
 
 #### One-off setup
 

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

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

client/components/helpCentre/HelpCentrePage.tsx

@@ -78,6 +78,11 @@ const HelpCentreRouter = () => {
 	*/
 
 	const knownIssues: KnownIssueObj[] = [
+		{
+			date: '18th Dec 2023 11:45',
+			message:
+				'Our customer service contact centre, including live chat, will be closed on Christmas Day, Boxing Day and New Year’s Day.',
+		},
 		{
 			date: '4th Dec 2023 12:45',
 			message:

client/components/helpCentre/liveChat/LiveChat.tsx

@@ -16,7 +16,6 @@ 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

@@ -36,7 +36,6 @@ import { DeliveryAddressUpdate } from './delivery/address/DeliveryAddressForm';
 import { Maintenance } from './maintenance/Maintenance';
 import { MMAPageSkeleton } from './MMAPageSkeleton';
 
-// 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);

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

@@ -93,9 +93,6 @@ const InnerContent = ({
 
 	const hasCancellationPending = productDetail.subscription.cancelledAt;
 
-	const isSelfServeCancellationAllowed =
-		productDetail.selfServiceCancellation.isAllowed;
-
 	const cancelledCopy =
 		specificProductType.cancelledCopy || groupedProductType.cancelledCopy;
 
@@ -253,26 +250,24 @@ const InnerContent = ({
 							margin-left: ${space[5]}px;
 						`}
 					>
-						{!hasCancellationPending &&
-							isSelfServeCancellationAllowed && (
-								<Button
-									priority="subdued"
-									onClick={() => {
-										navigate(
-											'/cancel/' +
-												specificProductType.urlPart,
-											{
-												state: {
-													productDetail:
-														productDetail,
-												},
+						{!hasCancellationPending && (
+							<Button
+								priority="subdued"
+								onClick={() => {
+									navigate(
+										'/cancel/' +
+											specificProductType.urlPart,
+										{
+											state: {
+												productDetail: productDetail,
 											},
-										);
-									}}
-								>
-									Cancel {groupedProductType.friendlyName()}
-								</Button>
-							)}
+										},
+									);
+								}}
+							>
+								Cancel {groupedProductType.friendlyName()}
+							</Button>
+						)}
 					</div>
 				</div>
 			</section>

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,7 +20,6 @@ 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,7 +79,6 @@ 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,12 +32,10 @@ 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;
@@ -138,7 +136,6 @@ 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,7 +12,6 @@ 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,7 +24,6 @@ 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,7 +32,6 @@ 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,7 +28,6 @@ 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,7 +8,6 @@ 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;
 }
 
@@ -20,15 +19,12 @@ 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,
@@ -72,14 +68,10 @@ 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,7 +15,6 @@ 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,17 +126,15 @@ export class FieldWrapper extends React.Component<
 	}
 
 	private validateField =
-
-
-			(otherOnChange?: (event: any) => void) =>
-			(field: { error: StripeError }) => {
-				if (otherOnChange) {
-					otherOnChange(field);
-				}
-				this.setState({
-					error: field.error?.message ? field.error : {},
-				});
-			};
+		(otherOnChange?: (event: any) => void) =>
+		(field: { error: StripeError }) => {
+			if (otherOnChange) {
+				otherOnChange(field);
+			}
+			this.setState({
+				error: field.error?.message ? field.error : {},
+			});
+		};
 
 	private toggleFocus = () => {
 		this.setState({

client/components/mma/paymentUpdate/NewPaymentMethodDetail.tsx

@@ -8,7 +8,6 @@ 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,7 +121,6 @@ export class AsyncLoader<
 		trackEvent({
 			eventCategory: 'asyncLoader',
 			eventAction: 'error',
-
 			eventLabel: error ? error.toString() : undefined,
 		});
 		Sentry.captureException(error);

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

@@ -14,9 +14,7 @@ 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');
@@ -39,11 +37,7 @@ function hasBadResponse(responses: Response | Response[]) {
 	return !responses.ok;
 }
 
-
-function handleSingleResponse(
-	response: Response,
-	transformResponse: (r: Response) => any,
-) {
+function handleSingleResponse(response: Response, transformResponse: 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,11 +5,9 @@ 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;
 };
@@ -21,7 +19,6 @@ 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,4 +1,3 @@
 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/shared/SectionContent.tsx

@@ -82,9 +82,14 @@ const divCss = (hasNav: boolean | undefined) => css`
 	}
 `;
 
-export const SelectedTopicObjectContext = createContext<
-	Dispatch<SetStateAction<string | undefined>>
->(undefined!);
+const defaultDispatch = (_value: SetStateAction<string | undefined>) => {
+	return;
+};
+
+export const SelectedTopicObjectContext =
+	createContext<Dispatch<SetStateAction<string | undefined>>>(
+		defaultDispatch,
+	);
 
 export const SectionContent = (props: SectionContentProps) => {
 	const [selectedTopicId, setSelectedTopicId] = useState<string | undefined>(

client/fixtures/productBuilder/baseProducts.ts

@@ -137,7 +137,7 @@ export function baseDigitalPack(): ProductDetail {
 		tier: 'Digital Pack',
 		isPaidTier: true,
 		selfServiceCancellation: {
-			isAllowed: true,
+			isAllowed: false,
 			shouldDisplayEmail: false,
 			phoneRegionsToDisplay: ['UK & ROW'],
 		},

client/utilities/analytics.ts

@@ -52,3 +52,9 @@ export const trackEvent = ({
 };
 
 export const trackEventInOphanOnly = (event: Event) => trackEvent(event);
+
+export const applyAnyOptimiseExperiments = () => {
+	if (typeof window !== 'undefined' && window.dataLayer) {
+		window.dataLayer.push({ event: 'optimize.activate' });
+	}
+};

client/utilities/hooks/useAnalytics.ts

@@ -3,6 +3,12 @@ import * as Sentry from '@sentry/browser';
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
+declare global {
+	interface Window {
+		dataLayer?: any;
+	}
+}
+
 export const useAnalytics = () => {
 	const location = useLocation();
 	const [cmpIsInitialised, setCmpIsInitialised] = useState<boolean>(false);

client/utilities/hooks/useAsyncLoader.ts

@@ -10,7 +10,6 @@ export enum LoadingState {
 }
 
 export function useAsyncLoader<T>(
-	// 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,
 ): {
@@ -30,7 +29,6 @@ export function useAsyncLoader<T>(
 		trackEvent({
 			eventCategory: 'asyncLoader',
 			eventAction: 'error',
-
 			eventLabel: error ? error.toString() : undefined,
 		});
 		Sentry.captureException(error);