Cookie advert

projects/social_platform/src/app/app.component.html

@@ -7,3 +7,4 @@
 >
 </mat-progress-bar>
 <router-outlet></router-outlet>
+<app-cookie-consent></app-cookie-consent>

projects/social_platform/src/app/app.component.ts

@@ -19,6 +19,7 @@ import { MatProgressBarModule } from "@angular/material/progress-bar";
 import { AsyncPipe, NgIf } from "@angular/common";
 import { TokenService } from "@corelib";
 import { LoadingService } from "@office/services/loading.service";
+import { CookieConsentComponent } from "@ui/components/cookie-consent/cookie-consent.component";
 
 /**
  * Корневой компонент приложения
@@ -31,7 +32,7 @@ import { LoadingService } from "@office/services/loading.service";
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.scss"],
   standalone: true,
-  imports: [NgIf, MatProgressBarModule, RouterOutlet, AsyncPipe],
+  imports: [NgIf, MatProgressBarModule, RouterOutlet, AsyncPipe, CookieConsentComponent],
 })
 export class AppComponent implements OnInit, OnDestroy {
   constructor(

projects/social_platform/src/app/office/services/analytics.service.ts

@@ -0,0 +1,61 @@
+/** @format */
+
+import { Injectable } from "@angular/core";
+
+@Injectable({
+  providedIn: "root",
+})
+export class AnalyticsService {
+  private loaded = false;
+
+  loadAnalytics(): void {
+    if (this.loaded) return;
+    if (window.location.hostname !== "app.procollab.ru") return;
+
+    this.loaded = true;
+    this.loadYandexMetrika();
+    this.loadMailRuCounter("3622531");
+
+    if (window.location.href === "https://app.procollab.ru/auth/register") {
+      this.loadMailRuCounter("3543687");
+    }
+  }
+
+  private loadYandexMetrika(): void {
+    const w = window as any;
+    w.ym =
+      w.ym ||
+      function (...args: any[]) {
+        (w.ym.a = w.ym.a || []).push(args);
+      };
+    w.ym.l = new Date().getTime();
+
+    const script = document.createElement("script");
+    script.async = true;
+    script.src = "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js";
+    document.head.appendChild(script);
+
+    w.ym(91871365, "init", {
+      clickmap: true,
+      trackLinks: true,
+      accurateTrackBounce: true,
+      webvisor: true,
+      trackHash: true,
+    });
+  }
+
+  private loadMailRuCounter(id: string): void {
+    const w = window as any;
+    const tmr = (w._tmr = w._tmr || []);
+    tmr.push({ id, type: "pageView", start: new Date().getTime() });
+
+    if (document.getElementById("tmr-code")) return;
+
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.async = true;
+    script.id = "tmr-code";
+    script.src = "https://top-fwz1.mail.ru/js/code.js";
+    document.head.appendChild(script);
+  }
+}

projects/social_platform/src/app/ui/components/button/button.component.scss

@@ -13,6 +13,11 @@
   border-radius: var(--rounded-xxl);
   transition: all 0.2s;
 
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
   &.button--inline {
     font-weight: 400;
     color: var(--white);

projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.html

@@ -0,0 +1,33 @@
+<!-- @format -->
+
+@if (visible) {
+<div class="cookie-consent text-body-12">
+  <p class="cookie-consent__text">мы используем файлы cookie для аналитики и улучшения сайта</p>
+
+  <div class="cookie-consent__controls">
+    <div class="cookie-consent__label" (click)="onAcceptedChange(!accepted)">
+      <app-checkbox [checked]="accepted"></app-checkbox>
+      <span>я согласен</span>
+    </div>
+
+    <div class="cookie-consent__buttons">
+      <app-button
+        size="big"
+        customTypographyClass="text-body-12"
+        [disabled]="!accepted"
+        (click)="confirm()"
+      >
+        принять
+      </app-button>
+      <app-button
+        size="big"
+        appearance="outline"
+        customTypographyClass="text-body-12"
+        (click)="decline()"
+      >
+        отклонить
+      </app-button>
+    </div>
+  </div>
+</div>
+}

projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.scss

@@ -0,0 +1,43 @@
+/** @format */
+
+.cookie-consent {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 9999;
+  max-width: 320px;
+  padding: 24px;
+  background-color: var(--light-white);
+  border: 0.5px solid var(--gray);
+  border-radius: var(--rounded-lg);
+
+  &__text {
+    margin: 0 0 12px;
+    color: var(--dark-gray);
+  }
+
+  &__controls {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__label {
+    display: inline-flex;
+    gap: 10px;
+    align-items: center;
+    color: var(--dark-gray);
+    cursor: pointer;
+  }
+
+  &__buttons {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    justify-content: space-between;
+
+    app-button {
+      flex: 1;
+    }
+  }
+}

projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.ts

@@ -0,0 +1,49 @@
+/** @format */
+
+import { Component, OnInit } from "@angular/core";
+import { CheckboxComponent } from "@ui/components/checkbox/checkbox.component";
+import { ButtonComponent } from "@ui/components/button/button.component";
+import { AnalyticsService } from "../../../office/services/analytics.service";
+
+@Component({
+  selector: "app-cookie-consent",
+  templateUrl: "./cookie-consent.component.html",
+  styleUrl: "./cookie-consent.component.scss",
+  standalone: true,
+  imports: [CheckboxComponent, ButtonComponent],
+})
+export class CookieConsentComponent implements OnInit {
+  visible = false;
+  accepted = false;
+
+  private readonly storageKey = "cookieConsent";
+
+  constructor(private analyticsService: AnalyticsService) {}
+
+  ngOnInit(): void {
+    const consent = localStorage.getItem(this.storageKey);
+
+    if (consent === "accepted") {
+      this.analyticsService.loadAnalytics();
+    } else {
+      this.visible = true;
+    }
+  }
+
+  onAcceptedChange(value: boolean): void {
+    this.accepted = value;
+  }
+
+  confirm(): void {
+    if (!this.accepted) return;
+
+    localStorage.setItem(this.storageKey, "accepted");
+    this.analyticsService.loadAnalytics();
+    this.visible = false;
+  }
+
+  decline(): void {
+    localStorage.setItem(this.storageKey, "declined");
+    this.visible = false;
+  }
+}

projects/social_platform/src/index.html

@@ -15,110 +15,6 @@
       rel="stylesheet"
     />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
-
-    <!-- Yandex.Metrika counter -->
-    <script type="text/javascript">
-      if (window.location.hostname === "app.procollab.ru") {
-        (function (m, e, t, r, i, k, a) {
-          m[i] =
-            m[i] ||
-            function () {
-              (m[i].a = m[i].a || []).push(arguments);
-            };
-          m[i].l = 1 * new Date();
-          for (var j = 0; j < document.scripts.length; j++) {
-            if (document.scripts[j].src === r) {
-              return;
-            }
-          }
-          (k = e.createElement(t)),
-            (a = e.getElementsByTagName(t)[0]),
-            (k.async = 1),
-            (k.src = r),
-            a.parentNode.insertBefore(k, a);
-        })(
-          window,
-          document,
-          "script",
-          "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js",
-          "ym"
-        );
-        ym(91871365, "init", {
-          clickmap: true,
-          trackLinks: true,
-          accurateTrackBounce: true,
-          webvisor: true,
-          trackHash: true,
-        });
-      }
-    </script>
-    <!-- /Yandex.Metrika counter -->
-
-    <!-- Top.Mail.Ru counter -->
-    <script type="text/javascript">
-      if (window.location.href === "https://app.procollab.ru/auth/register") {
-        var _tmr = window._tmr || (window._tmr = []);
-        _tmr.push({ id: "3543687", type: "pageView", start: new Date().getTime() });
-        (function (d, w, id) {
-          if (d.getElementById(id)) return;
-          var ts = d.createElement("script");
-          ts.type = "text/javascript";
-          ts.async = true;
-          ts.id = id;
-          ts.src = "https://top-fwz1.mail.ru/js/code.js";
-          var f = function () {
-            var s = d.getElementsByTagName("script")[0];
-            s.parentNode.insertBefore(ts, s);
-          };
-          if (w.opera == "[object Opera]") {
-            d.addEventListener("DOMContentLoaded", f, false);
-          } else {
-            f();
-          }
-        })(document, window, "tmr-code");
-      }
-    </script>
-    <noscript
-      ><div>
-        <img
-          src="https://top-fwz1.mail.ru/counter?id=3543687;js=na"
-          style="position: absolute; left: -9999px"
-          alt="Top.Mail.Ru"
-        /></div
-    ></noscript>
-    <!-- /Top.Mail.Ru counter -->
-
-    <!-- Top.Mail.Ru counter -->
-    <script type="text/javascript">
-      var _tmr = window._tmr || (window._tmr = []);
-      _tmr.push({ id: "3622531", type: "pageView", start: new Date().getTime() });
-      (function (d, w, id) {
-        if (d.getElementById(id)) return;
-        var ts = d.createElement("script");
-        ts.type = "text/javascript";
-        ts.async = true;
-        ts.id = id;
-        ts.src = "https://top-fwz1.mail.ru/js/code.js";
-        var f = function () {
-          var s = d.getElementsByTagName("script")[0];
-          s.parentNode.insertBefore(ts, s);
-        };
-        if (w.opera == "[object Opera]") {
-          d.addEventListener("DOMContentLoaded", f, false);
-        } else {
-          f();
-        }
-      })(document, window, "tmr-code");
-    </script>
-    <noscript
-      ><div>
-        <img
-          src="https://top-fwz1.mail.ru/counter?id=3622531;js=na"
-          style="position: absolute; left: -9999px"
-          alt="Top.Mail.Ru"
-        /></div
-    ></noscript>
-    <!-- /Top.Mail.Ru counter -->
   </head>
   <body>
     <app-root></app-root>