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

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>