Merge pull request 'feature/event-registration' (#61) from feature/event-registration into release/v3.7.0

Reviewed-on: https://git.onlyoffice.com/ONLYOFFICE/docspace-ui-kit-react/pulls/61
Reviewed-by: Alexey Safronov <alexey.safronov@onlyoffice.com>

Author: AlexeySafronov

billing/main-tariff/sub-components/UpdatePlanButtonContainer.tsx

@@ -49,6 +49,7 @@ import { Link } from "../../../components/link";
 import DowngradePlanButtonContainer from "./DowngradePlanButtonContainer";
 import ChangePricingPlanDialog from "../../dialogs/ChangePricingPlanDialog";
 import { usePaymentStore } from "../../store/PaymentStoreProvider";
+import { AnalyticsEvents } from "../../../enums";
 
 const StyledBody = styled.div`
   button {
@@ -184,11 +185,13 @@ const UpdatePlanButtonContainer = ({
       const data: { [key: string]: number } = isYearTariff
         ? { adminyear: managersCount }
         : { admin: managersCount };
+
       const updateRes = await paymentApi.updatePayment({
         quantityRequestDto: {
           quantity: data,
         },
       });
+
       const res = updateRes?.data?.response;
 
       if (res === false) {
@@ -220,6 +223,15 @@ const UpdatePlanButtonContainer = ({
         return;
       }
 
+      window.dataLayer = window.dataLayer || [];
+
+      window.dataLayer.push({
+        event: AnalyticsEvents.Purchase,
+        ecommerce: {
+          items: [{ item_name: "DocSpace Business" }],
+        },
+      });
+
       previousManagersCount = maxCountManagersByQuota;
       const quotaRes = await paymentApi
         .getQuotaPaymentInformation({

billing/services/pages/ai-tools/AiPaywallCompletePage.tsx

@@ -51,6 +51,7 @@ import { formatCurrencyValue } from "../../../utils/common";
 
 import styles from "./AiPaywallCompletePage.module.scss";
 import { toastr } from "../../../../components/toast";
+import { AnalyticsEvents } from "../../../../enums";
 
 type Status = "processing" | "success" | "error";
 
@@ -115,6 +116,12 @@ const AiPaywallCompletePage = () => {
   React.useEffect(() => {
     const run = async () => {
       try {
+        window.dataLayer = window.dataLayer || [];
+
+        window.dataLayer.push({
+          event: AnalyticsEvents.AddPaymentMethod,
+        });
+
         setStepIndex(1);
 
         await withRetry(
@@ -126,6 +133,9 @@ const AiPaywallCompletePage = () => {
           TOPUP_RETRY_DELAY_MS,
         );
 
+        window.dataLayer.push({
+          event: AnalyticsEvents.WalletTopUp,
+        });
 
         if (!isWalletOnly) {
           await rawApiClient.instance.post(

billing/shared/top-up-balance/sub-components/TopUpButtons.tsx

@@ -34,6 +34,10 @@
  */
 
 import React from "react";
+import { observer } from "mobx-react";
+
+import { AnalyticsEvents } from "../../../../enums";
+
 import { useCommonTranslation } from "../../../../utils/i18n";
 
 import { Button, ButtonSize } from "../../../../components/button";
@@ -44,7 +48,6 @@ import { Text } from "../../../../components/text";
 import { useAmountValue } from "../../../wallet/context";
 import styles from "../styles/TopUpModal.module.scss";
 import { AI_TOOLS } from "../../../constants";
-import { observer } from "mobx-react";
 import { usePaymentStore } from "../../../store/PaymentStoreProvider";
 
 interface TopUpButtonsProps {
@@ -72,7 +75,7 @@ const TopUpButtons: React.FC<TopUpButtonsProps> = ({
   onTopUpBalance,
   serviceName,
   afterTopUp,
-  isDisabled
+  isDisabled,
 }) => {
   const paymentStore = usePaymentStore();
 
@@ -99,6 +102,13 @@ const TopUpButtons: React.FC<TopUpButtonsProps> = ({
         throw new Error(t("UnexpectedError"));
       }
 
+      if (!serviceName) {
+        window.dataLayer = window.dataLayer || [];
+        window.dataLayer.push({
+          event: AnalyticsEvents.WalletTopUp,
+        });
+      }
+
       const requests: Promise<unknown>[] = [
         fetchBalance!(),
         fetchTransactionHistory!(serviceName),

billing/store/PaymentStore.ts

@@ -36,6 +36,8 @@
 import { makeAutoObservable, runInAction } from "mobx";
 import type {
   PaymentApi,
+  PaymentApiGetCheckoutSetupUrlRequest,
+  PaymentUrlRequestDto,
   ProfilesApi,
   PortalQuotaApi,
   CommonSettingsApi,
@@ -60,6 +62,7 @@ import { formatCurrencyValue } from "../utils/common";
 import { combineUrl } from "../../utils/combineUrl";
 import { getCookie } from "../../utils/cookie";
 import { LANGUAGE } from "../../constants";
+import { AnalyticsEvents } from "../../enums";
 import {
   AI_ENUM,
   BACKUP_SERVICE,
@@ -729,12 +732,17 @@ class PaymentStore {
     this.addAbortController(abortController);
 
     const backUrl = url || `${window.location.href}?complete=true`;
+    const successUrl = combineUrl(
+      window.location.origin,
+      "/portal-settings/payments/wallet?complete=true&type=wallet",
+    );
 
     try {
       const res = await this.paymentApi.getCheckoutSetupUrl(
         {
           backUrl,
-        },
+          successUrl,
+        } as PaymentApiGetCheckoutSetupUrlRequest & { successUrl: string },
         {
           signal: abortController.signal,
         },
@@ -890,7 +898,11 @@ class PaymentStore {
   getBasicPaymentLink = async (managersCount: number) => {
     const backUrl = combineUrl(
       window.location.origin,
-      "/portal-settings/payments/portal-payments?complete=true",
+      "/portal-settings/payments/portal-payments?cancel=true&type=tariff",
+    );
+    const successUrl = combineUrl(
+      window.location.origin,
+      "/portal-settings/payments/portal-payments?complete=true&type=tariff",
     );
 
     const abortController = new AbortController();
@@ -899,7 +911,11 @@ class PaymentStore {
     try {
       const res = await this.paymentApi.getPaymentUrl(
         {
-          paymentUrlRequestDto: { quantity: { admin: managersCount }, backUrl },
+          paymentUrlRequestDto: {
+            quantity: { admin: managersCount },
+            backUrl,
+            successUrl,
+          } as PaymentUrlRequestDto & { successUrl: string },
         },
         { signal: abortController.signal },
       );
@@ -915,7 +931,11 @@ class PaymentStore {
   getPaymentLink = async (token?: AbortSignal) => {
     const backUrl = combineUrl(
       window.location.origin,
-      "/portal-settings/payments/portal-payments?complete=true",
+      "/portal-settings/payments/portal-payments?cancel=true&type=tariff",
+    );
+    const successUrl = combineUrl(
+      window.location.origin,
+      "/portal-settings/payments/portal-payments?complete=true&type=tariff",
     );
 
     try {
@@ -924,7 +944,8 @@ class PaymentStore {
           paymentUrlRequestDto: {
             quantity: { admin: this.managersCount },
             backUrl,
-          },
+            successUrl,
+          } as PaymentUrlRequestDto & { successUrl: string },
         },
         token ? { signal: token } : undefined,
       );
@@ -978,6 +999,17 @@ class PaymentStore {
   };
 
   init = async (t: TTranslation) => {
+    const url = window.location.href;
+    if (url.includes("complete=true") && url.includes("type=tariff")) {
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        event: AnalyticsEvents.Purchase,
+        ecommerce: {
+          items: [{ item_name: "DocSpace Business" }],
+        },
+      });
+    }
+
     await this.tariff.fetchCustomerInfo();
 
     if (this.isInitPaymentPage) {
@@ -1029,7 +1061,15 @@ class PaymentStore {
   };
 
   paymentMethodInit = async (t: TTranslation, integrationUrl?: string) => {
-    const isRefresh = window.location.href.includes("complete=true");
+    const url = window.location.href;
+    const isRefresh = url.includes("complete=true");
+
+    if (isRefresh && url.includes("type=wallet")) {
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        event: AnalyticsEvents.AddPaymentMethod,
+      });
+    }
 
     try {
       const requests: Promise<unknown>[] = [];

enums/index.ts

@@ -420,3 +420,27 @@ export enum DistributedTaskStatus {
   Canceled,
   Failed,
 }
+
+/**
+ * Enum for GTM dataLayer analytics events.
+ * @readonly
+ */
+export enum AnalyticsEvents {
+  RoomCreated = "room_created",
+  RoomDeleted = "room_deleted",
+  RoomShared = "room_shared",
+  RoomArchived = "room_archived",
+  AgentCreated = "agent_created",
+  AgentDeleted = "agent_deleted",
+  FileCreated = "file_created",
+  FileUploaded = "file_uploaded",
+  FileDownloaded = "file_downloaded",
+  FileShared = "file_shared",
+  FileDeleted = "file_deleted",
+  UserInvited = "user_invited",
+  AiProviderAdded = "ai_provider_added",
+  WalletTopUp = "wallet_topup",
+  AddPaymentMethod = "add_payment_method",
+  Purchase = "purchase",
+}
+

types/global.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  interface Window {
+    dataLayer?: Record<string, unknown>[];
+  }
+}
+
+export {};