Merged in fix/BOOK-486-hotjar (pull request #3046)

fix(BOOK-486): suppress hotjar firstname lastname and initials

* fix(BOOK-486): suppress hotjar firstname lastname and initials


Approved-by: Joakim Jäderberg
Approved-by: Anton Gunnarsson

apps/partner-sas/components/Menu/UserMenu/index.tsx

@@ -88,7 +88,7 @@ export function UserMenu({ isMobile = false }: { isMobile?: boolean }) {
               />
               {isMobile ? null : (
                 <Typography variant="Body/Supporting text (caption)/smBold">
-                  <span>
+                  <span data-hj-suppress>
                     {firstName ?? session.data?.user?.email}
                     {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                     {` ${lastName}`}
@@ -162,7 +162,7 @@ function UserMenuContent({
       <div>
         {isMobile && (
           <Typography variant={"Title/Subtitle/md"}>
-            <h3>
+            <h3 data-hj-suppress>
               {intl.formatMessage(
                 {
                   id: "partnerSas.mobileMenu.greeting",

apps/scandic-web/components/Blocks/DynamicContent/Overview/UserBaseInfo/index.tsx

@@ -26,7 +26,7 @@ export default async function UserBaseInfo({ user }: UserBaseInfoProps) {
       />
       <div>
         <Typography variant="Title/smLowCase">
-          <h3 className={styles.fullName}>
+          <h3 data-hj-suppress className={styles.fullName}>
             {user.firstName} {user.lastName}
           </h3>
         </Typography>

apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -8,7 +8,7 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import useLang from "@/hooks/useLang"
@@ -47,12 +47,17 @@ export default function MyPagesMenuContent({
     <FocusLock returnFocus={true}>
       <nav className={styles.myPagesMenuContent}>
         <div className={introClassName}>
-          <Subtitle type="two" className={styles.userName}>
+          <Typography variant="Title/Subtitle/md" className={styles.userName}>
-            {intl.formatMessage(
+            <p data-hj-suppress>
-              { id: "myPages.hiFirstName", defaultMessage: "Hi {firstName}!" },
+              {intl.formatMessage(
-              { firstName: user.firstName }
+                {
-            )}
+                  id: "myPages.hiFirstName",
-          </Subtitle>
+                  defaultMessage: "Hi {firstName}!",
+                },
+                { firstName: user.firstName }
+              )}
+            </p>
+          </Typography>
           {membershipLevel && membershipPoints ? (
             <Caption className={styles.friendTypeWrapper}>
               <span className={styles.friendType}>{membershipLevel.name}</span>

apps/scandic-web/components/HotelReservation/MyStay/GuestDetails/index.tsx

@@ -179,7 +179,7 @@ export default function GuestDetails({
       )}
       <div className={styles.guest}>
         <Typography variant="Body/Paragraph/mdBold">
-          <p>
+          <p data-hj-suppress>
             {guest.firstName} {guest.lastName}
           </p>
         </Typography>

packages/design-system/lib/components/Avatar/index.tsx

@@ -25,7 +25,7 @@ export function Avatar({
           variant={size === 'lg' ? 'Title/Overline/sm' : 'Tag/sm'}
           className={variants.initials}
         >
-          <span>{initials}</span>
+          <span data-hj-suppress>{initials}</span>
         </Typography>
       ) : (
         <MaterialIcon icon="person" color="Icon/Inverted" size={iconSize} />