Analitycs consent modal update (#1171)

* feat(onboarding): modify welcome to HyperPlay modal

* feat(onboarding): update styles for welcome modal

* feat(assets): add diamond SVG to the assets folder

* feat(localization): update translations for the welcome modal

* feat(localization): remove outdated community call-to-action from translations

* fix(onboarding): removed numbers from they translation keys

* fix(localization): updated keys running yarn i18n again

* fix(onboarding): add new style condition to onboard modal

* fix(onboarding): add compatibility layer translation key for one item missing

* fix(onboarding): increase width and add top do the modal component

* fix(onboarding): adjust margins and font weights to use var from our lib

* fix(translations): add compatibility layer translation key

* update(onboarding): update analytics copy and style

* update(onboarding): update styles for analytics consent modal

* feat(onboarding): add AnalyticsV2 card component for privacy policy update

* feat(onboarding): add styles for AnalyticsV2 card component

* feat(onboarding): integrate AnalyticsV2 component into main app

* feat(onboarding): add close icon SVG for consent modal

* feat(onboarding): add check-circle SVG for consent modal

* feat(onboarding): add x-close SVG change

* feat(onboarding): add check-circle SVG update

* feat(onboarding): update and add translations for the onboad modal and card

* feat(onboarding): update styles for welcome modal

* fix(analytics): update component name on index

* fix(analytics): change component name

* fix(analytics): change component name on index

* fix(analytics): yarn.lock

* refactor(analytics): rename CardPrivacyPolicy import and remove unused styles

* delete(assets): remove unused check-circle.svg file

* delete(assets): remove unused x-close.svg file

* add(assets): add check-circle.svg for consent modal

* add(assets): add x-close.svg for consent modal

* fix(analytics): update title text style on card

* fix(analytics): update text color and font weight in privacy policy card

* fix(analytics): correct import path for CardPrivacyPolicy component

* fix(analytics): correct import path for CardPrivacyPolicy component

* fix(translation): run yarn i18n to resolve conflicts

Author: biliesilva

public/locales/en/translation.json

@@ -352,8 +352,8 @@
             "profile": "Profile"
         },
         "buttons": {
-            "agree": "I agree",
-            "noThanks": "No Thanks"
+            "primaryButton": "I Agree",
+            "secondaryButton": "No, Thanks"
         },
         "changeWallet": "Swap wallet account",
         "compatibilityLayer": "Compatibility Layer (Beta)",
@@ -374,19 +374,20 @@
         "linkSteamAccountDescription": "Sign in to Steam to link your HyperPlay account.",
         "linkSteamAccountTitle": "Link Steam Account",
         "logOut": "Log out",
-        "misc": "Never",
         "onboarding": {
             "analytics": {
-                "anonymized": "Send anonymized click & game interaction;",
                 "body": "HyperPlay would like to gather usage data to better understand how our users interact with the application. This information helps us understand how you use the app and lets us make HyperPlay even better for you.",
+                "bulletOne": "Always allow you to opt-out",
+                "bulletTwo": "Send anonymized click & game interaction",
                 "hyperplayWill": "HyperPlay will:",
-                "neverCollectIP": " collect your full IP address;",
-                "neverCollectPersonal": " collect keys, addresses, balances, hashes, or any personal information;",
-                "neverSellData": " sell data for profit. Ever!",
-                "optOut": "Always allow you to opt-out via Settings;",
+                "paragraphOne": "HyperPlay would like to gather usage data to better understand how our users interact with the application. \n           This lets us make HyperPlay even better for you.",
                 "privacyCaption": "This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679. For more information in relation to our privacy practices, please see our ",
-                "privacyPolicyHere": "Privacy Policy here.",
-                "title": "Help Us improve HyperPlay!"
+                "privacyPolicy": "Privacy Policy.",
+                "text": {
+                    "externalLink": "Learn More",
+                    "title": "We’ve updated our Privacy Policy"
+                },
+                "titleOne": "Help Us Improve HyperPlay!"
             },
             "connectAgain": "Connect again",
             "connectionCanceled": {

src/frontend/App.tsx

@@ -40,6 +40,7 @@ import { UpdateModalController } from './components/UI/UpdateModalController'
 import { QuestsPage } from './screens/Quests'
 import { NavigateListener } from './NavigateListener'
 import G7Webview from './screens/G7Webview'
+import CardPrivacyPolicy from './screens/Onboarding/analytics/CardPrivacyPolicy'
 
 function App() {
   const { sidebarCollapsed, isSettingsModalOpen, connectivity } =
@@ -54,6 +55,7 @@ function App() {
         <TopNavBar />
         <Sidebar />
         <main className="content">
+          <CardPrivacyPolicy />
           <QaAuthHandler />
           <NavigateListener />
           <ExtensionHandler />

src/frontend/assets/hyperplay/check-circle.svg

@@ -0,0 +1,39 @@
+.root {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 9999;
+  display: flex;
+  margin: var(--space-xl);
+  width: 380px;
+  padding: var(--space-md);
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-md);
+  border-radius: var(--space-sm);
+  background: var(--color-neutral-700);
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: var(--space-xs);
+  fill: var(--color-neutral-100);
+  padding: var(--space-md);
+}
+
+.text {
+  color: var(--color-neutral-100);
+  font-weight: var(--bold);
+}
+
+.link {
+  color: var(--color-primary-200) !important;
+  &:hover {
+    text-decoration: underline !important;
+  }
+}

src/frontend/assets/hyperplay/consent-modal/check-circle.svg

@@ -0,0 +1,51 @@
+import React, { useContext, useState } from 'react'
+import { MetricsOptInStatus } from 'common/types'
+import { t } from 'i18next'
+import ContextProvider from 'frontend/state/ContextProvider'
+import AnalyticsStyles from './index.module.scss'
+import { Link } from 'react-router-dom'
+import { ReactComponent as CloseIcon } from '/src/frontend/assets/hyperplay/x-close.svg'
+
+// Store is visible on local storage
+// The user has accepted the privacy policy
+const storage = window.localStorage
+const hasAcceptedPrivacyPolicy = storage.getItem('hasAcceptedPrivacyPolicy')
+
+function CardPrivacyPolicy() {
+  const { metricsOptInStatus } = useContext(ContextProvider)
+  const hasAcceptedV1 = metricsOptInStatus === MetricsOptInStatus.optedIn
+  const [isVisible, setIsVisible] = useState(!hasAcceptedPrivacyPolicy)
+
+  if (!hasAcceptedV1 || !isVisible) {
+    return null
+  }
+
+  const handleClose = () => {
+    setIsVisible(false)
+    storage.setItem('hasAcceptedPrivacyPolicy', 'true')
+  }
+
+  return (
+    <div className={AnalyticsStyles.root}>
+      <button className={AnalyticsStyles.closeButton} onClick={handleClose}>
+        <CloseIcon />
+      </button>
+      <span className={AnalyticsStyles.text}>
+        {t(
+          'hyperplay.onboarding.analytics.text.title',
+          `We’ve updated our Privacy Policy`
+        )}{' '}
+      </span>
+
+      <Link
+        className={AnalyticsStyles.link}
+        to="https://www.hyperplay.xyz/privacy-policy"
+        target="_blank"
+      >
+        {t('hyperplay.onboarding.analytics.text.externalLink', `Learn More`)}
+      </Link>
+    </div>
+  )
+}
+
+export default CardPrivacyPolicy

src/frontend/assets/hyperplay/consent-modal/x-close.svg

@@ -1,43 +1,67 @@
 .buttonContainer {
   display: flex;
   flex-direction: row;
-  margin: var(--space-lg) auto;
+  align-items: flex-start;
+  margin-left: 0;
+  margin-top: var(--space-xl);
   gap: var(--space-xs);
 }
 
+.title {
+  color: var(--color-neutral-100);
+  margin-bottom: var(--space-xs);
+}
+
 .buttonContainer button {
-  min-width: 188px;
+  min-width: 120px;
   border-radius: var(--space-xs);
 }
 
 .bulletPointContainer {
   display: flex;
   flex-direction: row;
+  justify-content: start;
+  align-items: flex-start;
 }
 
 .bulletPointContainer > svg {
-  padding-top: var(--space-2xs);
-  padding-right: var(--space-sm);
-  height: 13px;
+  padding-right: var(--space-xs);
+  width: 28px;
+  height: 28px;
 }
 
 .bulletPointContainer > body:first-word {
-  color: var(--color-status-error);
+  font-size: var(--body-sm);
 }
 
-.infoText {
+.bullets {
   color: var(--color-neutral-100);
+  font-weight: var(--bold);
+  margin-bottom: var(--space-xs);
+}
+
+.titleSm {
+  color: var(--color-neutral-100);
+  font-size: var(--body);
+  font-weight: var(--bold);
+  margin-bottom: var(--space-lg);
+}
+
+.bullets {
+  color: var(--color-neutral-400);
 }
 
 .marginBottomLg {
   margin-bottom: var(--space-lg);
+  color: var(--color-neutral-400);
 }
 .marginBottomSm {
   margin-bottom: var(--space-xs);
 }
 
 .privacyCaption {
-  color: var(--color-neutral-300);
+  color: var(--color-neutral-400);
+  margin-top: var(--space-lg);
 }
 
 .privacyCaption > a {