diff --git a/projects/social_platform/src/app/app.component.html b/projects/social_platform/src/app/app.component.html index a7f3b4aeb..ece9b1d56 100644 --- a/projects/social_platform/src/app/app.component.html +++ b/projects/social_platform/src/app/app.component.html @@ -7,3 +7,4 @@ > + diff --git a/projects/social_platform/src/app/app.component.ts b/projects/social_platform/src/app/app.component.ts index 861f9e768..3eb247d55 100644 --- a/projects/social_platform/src/app/app.component.ts +++ b/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( diff --git a/projects/social_platform/src/app/office/services/analytics.service.ts b/projects/social_platform/src/app/office/services/analytics.service.ts new file mode 100644 index 000000000..97b56f0cd --- /dev/null +++ b/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); + } +} diff --git a/projects/social_platform/src/app/ui/components/button/button.component.scss b/projects/social_platform/src/app/ui/components/button/button.component.scss index 01f70b2c2..1b8f6b5f0 100644 --- a/projects/social_platform/src/app/ui/components/button/button.component.scss +++ b/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); diff --git a/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.html b/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.html new file mode 100644 index 000000000..f6a180b3a --- /dev/null +++ b/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.html @@ -0,0 +1,33 @@ + + +@if (visible) { + +} diff --git a/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.scss b/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.scss new file mode 100644 index 000000000..5a735513b --- /dev/null +++ b/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; + } + } +} diff --git a/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.ts b/projects/social_platform/src/app/ui/components/cookie-consent/cookie-consent.component.ts new file mode 100644 index 000000000..d251c24fa --- /dev/null +++ b/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; + } +} diff --git a/projects/social_platform/src/index.html b/projects/social_platform/src/index.html index ca86ef945..23f5efbe5 100644 --- a/projects/social_platform/src/index.html +++ b/projects/social_platform/src/index.html @@ -15,110 +15,6 @@ rel="stylesheet" /> - - - - - - - - - - - - - -