Delete hash warning

.github/workflows/production.yaml

@@ -28,7 +28,7 @@ jobs:
               run: npx playwright install --with-deps
 
             - name: Run Playwright Tests
-              run: npx playwright test
+              run: NODE_OPTIONS="--no-experimental-strip-types" npx playwright test
 
             - name: Upload Playwright Traces
               if: failure()

next.config.mjs

@@ -2,6 +2,7 @@ import createMDX from "@next/mdx";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  productionBrowserSourceMaps: true,
   webpack(config) {
     config.module.rules.push(
       {

package.json

@@ -18,7 +18,7 @@
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^14.2.17",
-    "@next/third-parties": "^14.2.17",
+    "@next/third-parties": "^14.2.35",
     "@svgr/webpack": "^8.1.0",
     "@types/js-cookie": "^3.0.6",
     "@types/mdx": "^2.0.13",

src/app/[language]/layout.tsx

@@ -4,7 +4,6 @@ import { DEFAULT_LANGUAGE_CODE } from "@/features/localization/localization.conf
 import { cookies } from "next/headers";
 import { PREFERRED_THEME_COOKIE_KEY } from "@/features/themes/theme.config";
 import { PageLayoutComponent } from "@/features/common/components/layout/page-layout/page-layout.component";
-import { UseHashWarningComponent } from "@/features/decoder/components/use-hash-warning/use-hash-warning.component";
 import { PageMetadataProps } from "@/features/common/models/page-metadata.props";
 import { getHomeDictionary } from "@/features/localization/services/language-dictionary.service";
 import { generatePageMetadata } from "@/libs/metadata/metadata.service";
@@ -54,7 +53,6 @@ export default function RootLayout({
       themeCode={initialThemeCookieValue}
     >
       {children}
-      <UseHashWarningComponent languageCode={languageCode} />
     </PageLayoutComponent>
   );
 }

src/app/sitemap.ts

@@ -6,14 +6,35 @@ export default function sitemap(): MetadataRoute.Sitemap {
     {
       url: BASE_URL,
       lastModified: new Date(),
+      alternates: {
+        languages: {
+          en: `${BASE_URL}/`,
+          ja: `${BASE_URL}/ja/`,
+          "x-default": `${BASE_URL}/`,
+        },
+      },
     },
     {
       url: `${BASE_URL}/introduction`,
       lastModified: new Date(),
+      alternates: {
+        languages: {
+          en: `${BASE_URL}/introduction`,
+          ja: `${BASE_URL}/ja/introduction`,
+          "x-default": `${BASE_URL}/introduction`,
+        },
+      },
     },
     {
       url: `${BASE_URL}/libraries`,
       lastModified: new Date(),
+      alternates: {
+        languages: {
+          en: `${BASE_URL}/libraries`,
+          ja: `${BASE_URL}/ja/libraries`,
+          "x-default": `${BASE_URL}/libraries`,
+        },
+      },
     },
   ];
-}
+}

src/features/analytics/components/adobe-analytics-script.component.tsx

@@ -0,0 +1,10 @@
+import Script from 'next/script';
+
+const AdobeAnalyticsScript = () => {
+  const source = process.env.NEXT_PUBLIC_ADOBE_ANALYTICS_URL;
+  return source ? (
+    <Script type="text/javascript" src={source} charSet="UTF-8" async></Script>
+  ) : null;
+};
+
+export default AdobeAnalyticsScript;

src/features/common/components/shell/gtm/safe-gtm.component.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { GoogleTagManager } from "@next/third-parties/google"
+import { useEffect, useState } from "react";
+
+const MAX_HASH_LENGTH = 4000;
+
+export function SafeGTM({ gtmId}: { gtmId: string}) {
+    const [canLoad, setCanLoad] = useState(false)
+
+    useEffect(() => {
+        /** GTM can make the app crash when large tokens are sent via hash
+         * This code deletes temporaly the hash, loads the GTM and then puts it 
+         * back again
+        */
+        const hash = window.location.hash
+        const hasLargeHash = hash.length > MAX_HASH_LENGTH
+        let originalHash = ""
+        if(hasLargeHash) {
+            originalHash = hash
+            window.location.hash = ""
+            setTimeout(() => {
+                window.location.hash = originalHash
+            }, 500)
+        }
+        setCanLoad(true)
+    }, [])
+
+    return canLoad ? <GoogleTagManager gtmId={gtmId} /> : null
+}

src/features/common/components/shell/shell.component.tsx

@@ -12,7 +12,6 @@ import { COOKIE_LEVELS } from "@/features/analytics/models/cookie-levels.constan
 import { OnetrustScriptComponent } from "@/features/analytics/components/onetrust-script.component";
 import { CLIENT_CONFIG } from "@/features/analytics/services/config";
 import { COOKIE_CONSENT_STATUS } from "@/features/analytics/models/cookie-consent-status.constants";
-import { GoogleTagManager } from "@next/third-parties/google";
 import styles from "./shell.module.scss";
 import { UiLocalizationService } from "@/features/localization/services/ui-localization.service";
 import { clsx } from "clsx";
@@ -26,6 +25,8 @@ import {
 import { ThemeDetectorComponent } from "@/features/common/components/theme-detector/theme-detector.component";
 import { ThemeCookieValues } from "@/features/common/values/theme.values";
 import { AbTestingScriptComponent } from "@/features/analytics/components/ab-testing-script/ab-testing-script.component";
+import AdobeAnalyticsScript from "@/features/analytics/components/adobe-analytics-script.component";
+import { SafeGTM } from "./gtm/safe-gtm.component";
 
 const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
 
@@ -55,11 +56,11 @@ export const ShellComponent: React.FC<ShellComponentProps> = ({
       if (e.data === COOKIE_CONSENT_STATUS.WAITING_FOR_CONSENT) {
         // eslint-disable-next-line new-cap
         window.OneTrust.OnConsentChanged(() =>
-          setConsentLevel(window.OnetrustActiveGroups),
+          setConsentLevel(window.OnetrustActiveGroups)
         );
       }
     },
-    [consentLevel],
+    [consentLevel]
   );
 
   useEffect(() => {
@@ -98,20 +99,21 @@ export const ShellComponent: React.FC<ShellComponentProps> = ({
         PrimaryFont.variable,
         SecondaryFont.variable,
         JapaneseFont.variable,
-        MonoFont.variable,
+        MonoFont.variable
       )}
       data-theme={themeCode}
     >
       <OnetrustScriptComponent
         id={CLIENT_CONFIG.DEVELOPERS_DATA_DOMAIN_ID_ONETRUST}
       />
+      <AdobeAnalyticsScript />
       {children}
       {consentLevel &&
         consentLevel.includes(COOKIE_LEVELS.NECESSARY.toString()) &&
         process.env.NEXT_PUBLIC_IS_PROD &&
         GTM_ID && (
           <>
-            <GoogleTagManager gtmId={GTM_ID} />
+            <SafeGTM gtmId={GTM_ID} />
             <AbTestingScriptComponent />
           </>
         )}

src/features/decoder/components/token-decoder.component.tsx

@@ -8,9 +8,7 @@ import { SecretKeyInputComponent } from "@/features/decoder/components/secret-ke
 import { useDecoderStore } from "@/features/decoder/services/decoder.store";
 import { useRouter } from "next/navigation";
 import {
-  SupportedTokenHashParamValues,
-  WARNING_PARAM_KEY,
-  WARNING_PARAM_VALUE,
+  SupportedTokenHashParamValues
 } from "@/libs/config/project.constants";
 import { HomeDictionaryModel } from "@/features/localization/models/home-dictionary.model";
 import { ClaimDescriptionVisibilityValues } from "@/features/common/values/claim-description-visibility.values";
@@ -50,9 +48,6 @@ export const TokenDecoderComponent: React.FC<TokenDecoderComponentProps> = ({
 
   const loadDecoderInputs = useDecoderStore((state) => state.loadDecoderInputs);
   const handleJwtChange$ = useDecoderStore((state) => state.handleJwtChange);
-  const showUseHashWarning$ = useDecoderStore(
-    (state) => state.showUseHashWarning
-  );
 
   useEffect(() => {
     const handleHashChange = () => {
@@ -72,18 +67,17 @@ export const TokenDecoderComponent: React.FC<TokenDecoderComponentProps> = ({
         }
 
         const newUrl = `${currentUrl}#${SupportedTokenHashParamValues.TOKEN}=${token}`;
-
         window.location.replace(newUrl);
-
         return;
       }
 
       if (!hash.includes("=")) {
         return;
       }
 
-      const hashParams = new URLSearchParams(hash);
+
 
+      const hashParams = new URLSearchParams(hash);
       Object.values(SupportedTokenHashParamValues).forEach((hashParamKey) => {
         const token = hashParams.get(hashParamKey);
 
@@ -93,42 +87,14 @@ export const TokenDecoderComponent: React.FC<TokenDecoderComponentProps> = ({
       });
     };
 
-    const handleWarning = () => {
-      const search = window.location.search;
-
-      const searchParams = new URLSearchParams(search);
-      const warning = searchParams.get(WARNING_PARAM_KEY);
-
-      if (warning === WARNING_PARAM_VALUE) {
-        showUseHashWarning$();
-
-        searchParams.delete(WARNING_PARAM_KEY);
-
-        const currentUrl = window.location.href.split("?")[0];
-
-        let newUrl = `${currentUrl}`;
-
-        if (searchParams.size > 0) {
-          newUrl += `?${searchParams.toString()}`;
-        }
-
-        if (window.location.hash) {
-          newUrl += window.location.hash;
-        }
-
-        router.push(newUrl);
-      }
-    };
-
     window.addEventListener("hashchange", handleHashChange);
-
+    
     handleHashChange();
-    handleWarning();
 
     return () => {
       window.removeEventListener("hashchange", handleHashChange);
     };
-  }, [handleJwtChange$, router, showUseHashWarning$]);
+  }, [handleJwtChange$, router]);
 
   useEffect(() => {
     if (isMounted.current) {