feat/sw-1266: mask private info in hotjar recordings

app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx

@@ -39,7 +39,13 @@ export default async function Profile({ params }: PageArgs<LangParams>) {
           <Title as="h4" color="red" level="h1" textTransform="capitalize">
             {intl.formatMessage({ id: "Welcome" })}
           </Title>
-          <Title as="h4" color="burgundy" level="h2" textTransform="capitalize">
+          <Title
+            data-hj-suppress
+            as="h4"
+            color="burgundy"
+            level="h2"
+            textTransform="capitalize"
+          >
             {user.name}
           </Title>
         </hgroup>

components/Blocks/DynamicContent/Overview/Friend/index.tsx

@@ -41,7 +41,7 @@ export default async function Friend({
         />
       </header>
       <div className={styles.membership}>
-        <Title className={styles.name} color="pale" level="h3">
+        <Title data-hj-suppress className={styles.name} color="pale" level="h3">
           {name}
         </Title>
         {children}

components/Forms/Edit/Profile/FormContent/index.tsx

@@ -37,10 +37,15 @@ export default function FormContent() {
           </Body>
         </header>
         <DateSelect name="dateOfBirth" registerOptions={{ required: true }} />
-        <Input label={`${street} 1`} name="address.streetAddress" />
-        <Input label={city} name="address.city" />
+        <Input
+          data-hj-suppress
+          label={`${street} 1`}
+          name="address.streetAddress"
+        />
+        <Input data-hj-suppress label={city} name="address.city" />
         <div className={styles.container}>
           <Input
+            data-hj-suppress
             label={zipCode}
             name="address.zipCode"
             registerOptions={{ required: true }}
@@ -56,8 +61,9 @@ export default function FormContent() {
           name="email"
           registerOptions={{ required: true }}
           type="email"
+          data-hj-suppress
         />
-        <Phone label={phoneNumber} name="phoneNumber" />
+        <Phone label={phoneNumber} name="phoneNumber" data-hj-suppress />
         <Select
           items={languageSelect}
           label={intl.formatMessage({ id: "Language" })}
@@ -71,11 +77,17 @@ export default function FormContent() {
             {intl.formatMessage({ id: "Password" })}
           </Body>
         </header>
-        <Input label={currentPassword} name="password" type="password" />
+        <Input
+          data-hj-suppress
+          label={currentPassword}
+          name="password"
+          type="password"
+        />
         {/* visibilityToggleable set to false as feature is done for signup first */}
         {/* likely we can remove the prop altogether once signup launches */}
-        <NewPassword visibilityToggleable={false} />
+        <NewPassword data-hj-suppress visibilityToggleable={false} />
         <Input
+          data-hj-suppress
           label={retypeNewPassword}
           name="retypeNewPassword"
           type="password"

components/Forms/Edit/Profile/index.tsx

@@ -114,7 +114,13 @@ export default function Form({ user }: EditFormProps) {
         <Title as="h4" color="red" level="h1" textTransform="capitalize">
           {intl.formatMessage({ id: "Welcome" })}
         </Title>
-        <Title as="h4" color="burgundy" level="h2" textTransform="capitalize">
+        <Title
+          data-hj-suppress
+          as="h4"
+          color="burgundy"
+          level="h2"
+          textTransform="capitalize"
+        >
           {user.name}
         </Title>
       </hgroup>

utils/session.ts

@@ -9,11 +9,14 @@ export function isValidSession(session: Session | null) {
     console.log(`Session error: ${session.error}`)
     return false
   }
-  if (session.token.error) {
-    console.log(`Session token error: ${session.token.error}`)
+
+  const token = session.token
+
+  if (token?.error) {
+    console.log(`Session token error: ${token.error}`)
     return false
   }
-  if (session.token.expires_at && session.token?.expires_at < Date.now()) {
+  if (token?.expires_at && token.expires_at < Date.now()) {
     console.log(`Session expired: ${session.token.expires_at}`)
     return false
   }