jsonwebtoken.github.io/src/features/common/components/shell/shell.component.tsx at 225efe7eeab6ffdaa46b850b6a9017208f3c6e19 · jsonwebtoken/jsonwebtoken.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
"use client";

import React, {
  PropsWithChildren,
  useCallback,
  useEffect,
  useState,
} from "react";

import { saveUTM } from "@/features/analytics/services/save-utm";
import { COOKIE_LEVELS } from "@/features/analytics/models/cookie-levels.constants";
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 styles from "./shell.module.scss";
import { UiLocalizationService } from "@/features/localization/services/ui-localization.service";
import { clsx } from "clsx";
import {
  getLocalizedPrimaryFont,
  JapaneseFont,
  MonoFont,
  PrimaryFont,
  SecondaryFont,
} from "@/libs/theme/fonts";
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;

interface ShellComponentProps extends PropsWithChildren {
  languageCode: string;
  themeCode: ThemeCookieValues;
}

export const ShellComponent: React.FC<ShellComponentProps> = ({
  children,
  languageCode,
  themeCode,
}) => {
  const [consentLevel, setConsentLevel] = useState<string | null>(null);

  UiLocalizationService.init(languageCode);

  const handleConsentChange = useCallback(
    (e: any) => {
      if (
        e.data === COOKIE_CONSENT_STATUS.EXPRESSED_CONSENT &&
        window.OnetrustActiveGroups !== consentLevel
      ) {
        setConsentLevel(window.OnetrustActiveGroups);
      }

      if (e.data === COOKIE_CONSENT_STATUS.WAITING_FOR_CONSENT) {
        // eslint-disable-next-line new-cap
        window.OneTrust.OnConsentChanged(() =>
          setConsentLevel(window.OnetrustActiveGroups)
        );
      }
    },
    [consentLevel]
  );

  useEffect(() => {
    window.addEventListener("message", handleConsentChange, false);
    saveUTM();

    return () => window.removeEventListener("message", handleConsentChange);
  }, [handleConsentChange]);

  useEffect(() => {
    /**
     * At some point, the original jwt.io website used to store tokens and keys in LocalStorage
     * as a feature for people to see the last JWT they used.
     * That feature was removed as it was identified as a security risk.
     * This clean-up logic was added to remove existing tokens in LocalStorage from users who
     * were affected by the feature.
     * We are keeping this logic as part of legacy code. But, the number of users still affected should be close to zero.
     */
    try {
      if (typeof localStorage === "undefined") {
        return;
      }

      localStorage.removeItem("lastToken");
      localStorage.removeItem("lastPublicKey");
    } catch (error) {
      console.error(error);
    }
  }, []);

  return (
    <body
      className={clsx(
        getLocalizedPrimaryFont(languageCode),
        styles.container,
        PrimaryFont.variable,
        SecondaryFont.variable,
        JapaneseFont.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 && (
          <>
            <SafeGTM gtmId={GTM_ID} />
            <AbTestingScriptComponent />
          </>
        )}
      <ThemeDetectorComponent />
    </body>
  );
};