Merge pull request #13407 from bbc/WS-1400-ECT-HELMET

WS-1400: Add client side redirect to .lite site for 2g and slow 2g Users

Author: Isabella-Mitchell

src/app/components/CallToActionLink/index.tsx

@@ -9,6 +9,7 @@ import styles from './index.styles';
 import CallToActionLinkContext from './CallToActionLinkContext';
 
 type CallToActionLinkProps = {
+  id?: string;
   url: string;
   className?: string;
   eventTrackingData?: EventTrackingData;
@@ -19,6 +20,7 @@ type CallToActionLinkProps = {
 };
 
 const CallToActionLink = ({
+  id,
   url,
   children,
   eventTrackingData,
@@ -43,6 +45,7 @@ const CallToActionLink = ({
 
   return (
     <a
+      {...(id && { id })}
       href={url}
       {...(eventTrackingData && clickTrackerHandler)}
       className={className}

src/app/components/LiteSiteSummary/index.tsx

@@ -40,6 +40,7 @@ const LiteSiteSummary = () => {
         </Paragraph>
         <Paragraph data-e2e="to-main-site">
           <CallToActionLink
+            id="go-back-to-canonical-link"
             url={canonicalLink}
             data-ignore-lite
             {...clickTrackerHandler}

src/app/hooks/useNetworkStatusTracker/index.test.tsx

@@ -1,7 +1,7 @@
 import { renderHook, act } from '@testing-library/react';
 import { renderHook as renderSSRHook } from '@testing-library/react-hooks/server';
+import { EffectiveNetworkType } from '#app/models/types/global';
 import useNetworkStatus from './index';
-import { EffectiveNetworkType } from './type';
 
 describe('useNetworkStatus', () => {
   const originalNavigator = window.navigator;

src/app/hooks/useNetworkStatusTracker/index.tsx

@@ -1,21 +1,13 @@
 import { useState, useEffect } from 'react';
 import getEffectiveNetworkType from '#app/lib/utilities/getEffectiveNetworkType';
-import { EffectiveNetworkType, NetworkStatus } from './type';
+import { NetworkStatus } from './type';
 
 /**
  * A hook to monitor and provide real-time network connectivity status.
  * Tracks whether the user is online or offline and includes the effective network type.
  * @returns {NetworkStatus} An object containing isOnline (boolean), source ('browser'), and networkType (EffectiveNetworkType).
  */
 
-interface NavigatorWithConnection extends Navigator {
-  connection?: {
-    effectiveType?: EffectiveNetworkType;
-    addEventListener?: (type: string, listener: () => void) => void;
-    removeEventListener?: (type: string, listener: () => void) => void;
-  };
-}
-
 const useNetworkStatusTracker = (): NetworkStatus => {
   const [networkStatus, setNetworkStatus] = useState<NetworkStatus>(() => {
     const isOnline =
@@ -58,7 +50,7 @@ const useNetworkStatusTracker = (): NetworkStatus => {
     window.addEventListener('online', handleOnline);
     window.addEventListener('offline', handleOffline);
 
-    const { connection } = navigator as NavigatorWithConnection;
+    const { connection } = navigator;
 
     if (connection?.addEventListener) {
       connection.addEventListener('change', handleConnectionChange);

src/app/hooks/useNetworkStatusTracker/type.tsx

@@ -1,10 +1,4 @@
-export type EffectiveNetworkType =
-  | 'slow-2g'
-  | '2g'
-  | '3g'
-  | '4g'
-  | '5g'
-  | 'unknown';
+import { EffectiveNetworkType } from '#app/models/types/global';
 
 export type NetworkStatus = {
   isOnline: boolean;

src/app/lib/utilities/getEffectiveNetworkType.ts

@@ -1,4 +1,4 @@
-import { EffectiveNetworkType } from '../../hooks/useNetworkStatusTracker/type';
+import { EffectiveNetworkType } from '#app/models/types/global';
 
 const getEffectiveNetworkType = (): EffectiveNetworkType => {
   if (typeof window === 'undefined' || !navigator) {

src/app/models/types/global.ts

@@ -134,3 +134,11 @@ export type ServicesVariantsProps = {
   service: Services;
   variant?: Variants;
 };
+
+export type EffectiveNetworkType =
+  | 'slow-2g'
+  | '2g'
+  | '3g'
+  | '4g'
+  | '5g'
+  | 'unknown';

src/global.d.ts

@@ -1,7 +1,15 @@
 import { ReverbClient } from '#models/types/eventTracking';
 import { BumpType, Player } from '#app/components/MediaLoader/types';
+import { EffectiveNetworkType } from '#app/models/types/global';
 
 declare global {
+  interface Navigator {
+    connection?: {
+      effectiveType?: EffectiveNetworkType;
+      addEventListener?: (type: string, listener: () => void) => void;
+      removeEventListener?: (type: string, listener: () => void) => void;
+    };
+  }
   interface Window {
     bbcpage:
       | {

src/server/Document/Renderers/CanonicalRenderer.tsx

@@ -4,6 +4,7 @@ import IfAboveIE9 from '#app/legacy/components/IfAboveIE9Comment';
 import NO_JS_CLASSNAME from '#app/lib/noJs.const';
 import { getProcessEnvAppVariables } from '#app/lib/utilities/getEnvConfig';
 import serialiseForScript from '#app/lib/utilities/serialiseForScript';
+import CanonicalToLiteRedirect from '#src/server/utilities/CanonicalToLiteRedirect';
 import addOperaMiniClassScript from '#app/lib/utilities/addOperaMiniClassScript';
 import { BaseRendererProps } from './types';
 import ReverbTemplate from './ReverbTemplate';
@@ -98,6 +99,7 @@ export default function CanonicalRenderer({
   return (
     <html lang="en-GB" className={NO_JS_CLASSNAME} {...htmlAttrs}>
       <head>
+        <CanonicalToLiteRedirect />
         <ReverbTemplate nonce={nonce} />
         {isApp && <meta name="robots" content="noindex" />}
         {title}

src/server/Document/Renderers/LiteRenderer.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-danger */
 import { ReactElement, PropsWithChildren } from 'react';
+import { OptOutOfLiteRedirect } from '#src/server/utilities/CanonicalToLiteRedirect';
 import { BaseRendererProps } from './types';
 import ComponentTracking from './ComponentTracking';
 
@@ -24,6 +25,7 @@ export default function LitePageRenderer({
         {helmetMetaTags}
         {helmetLinkTags}
         <style dangerouslySetInnerHTML={{ __html: styles }} />
+        <OptOutOfLiteRedirect />
         {/* IMPORTANT: ComponentTracking MUST come before helmetScriptTags due to synchronous calls from helmetScriptTags to functions within ComponentTracking */}
         <ComponentTracking
           enableStaticClickTrackingOnOperaMiniOnly={false}