Merge pull request #58 from Telegram-Mini-Apps/fix/properly-use-telegram-bus

Fixes

Author: sorawalker

declaration.d.ts

@@ -265,13 +265,18 @@ export interface WebApp {
 
 export interface Telegram {
     WebApp: WebApp;
+    //TODO type for WebView
     WebView: any;
 }
 
 declare global {
     interface Window {
         Telegram: Telegram,
+        //TODO better types for proxies
         TelegramGameProxy: any,
+        TelegramWebviewProxy: {
+          postEvent: (eventType, eventData) => void,
+        },
         TelegramGameProxy_receiveEvent: (eventType: string, eventData: unknown) => void,
         telegramAnalytics: {
             init: ({ token, appName }: {

src/controllers/Analytics.controller.ts

@@ -2,14 +2,12 @@ import { App } from '../app'
 import { TonConnectObserver } from "../observers/TonConnect.observer";
 import { DocumentObserver } from "../observers/Document.observer";
 import {BACKEND_URL, STAGING_BACKEND_URL} from "../constants";
-import {WebAppObserver} from "../observers/WebApp.observer";
 import {WebViewObserver} from "../observers/WebView.observer";
 
 export class AnalyticsController {
     private appModule: App;
     private tonConnectObserver: TonConnectObserver;
     private documentObserver: DocumentObserver;
-    private webAppObserver: WebAppObserver;
     private webViewObserver: WebViewObserver;
 
     private eventsThreshold: Record<string, number> = {
@@ -21,14 +19,12 @@ export class AnalyticsController {
 
         this.documentObserver = new DocumentObserver(this);
         this.tonConnectObserver = new TonConnectObserver(this);
-        this.webAppObserver = new WebAppObserver(this);
         this.webViewObserver = new WebViewObserver(this);
     }
 
     public async init() {
         this.documentObserver.init();
         this.tonConnectObserver.init();
-        this.webAppObserver.init();
         this.webViewObserver.init();
 
         try {

src/observers/WebApp.observer.ts

@@ -24,30 +24,34 @@ export class WebViewObserver {
         this.handlePlatformListener(window.TelegramGameProxy);
         this.handlePlatformListener(window.Telegram.WebView);
         this.handlePlatformListener(window.TelegramGameProxy_receiveEvent);
+
+        this.initPostEventBus();
     }
 
     private handlePlatformListener(listener: any) {
         if (!listener) {
             return;
         }
 
-        let originalReceiveEvent: (eventType: string, eventData: unknown) => void;
-
-        if (listener?.receiveEvent) {     
-            originalReceiveEvent = listener.receiveEvent;
-        } else {
-            originalReceiveEvent = listener;
-            listener = window;
-        }
-
         const observer = this;
 
-        listener.receiveEvent = (eventType: string, eventData: unknown) => {
-            observer.handleEvents(eventType, eventData);
+        if (listener?.receiveEvent) {
+            listener.receiveEvent = (eventType: string, eventData: unknown) => {
+                observer.handleEvents(eventType, eventData as Record<string, any>);
 
-            return originalReceiveEvent.call(listener, eventType, eventData);
-        }
+                window.Telegram.WebView.callEventCallbacks(eventType, function(callback) {
+                    callback(eventType, eventData);
+                });
+            }
+        } else {
+            window.TelegramGameProxy_receiveEvent = (eventType: string, eventData: unknown) => {
+                observer.handleEvents(eventType, eventData as Record<string, any>);
 
+                window.Telegram.WebView.callEventCallbacks(eventType, function(callback) {
+                    callback(eventType, eventData);
+                });
+            }
+        }
     }
 
     private handleEvents(eventType: string, eventData: Record<string, any>) {
@@ -58,5 +62,55 @@ export class WebViewObserver {
                 });
             }
         }
-    }    
+    }
+
+    private initPostEventBus() {
+        window.Telegram.WebView.postEvent = (eventType, callback, eventData) => {
+            this.originalPostEvent(eventType, callback, eventData);
+            if (eventType === 'web_app_open_invoice') {
+                let slug = eventData.slug;
+
+                if (slug.startsWith('$')){
+                    slug = slug.slice(1);
+                }
+
+                this.analyticsController.collectEvent(Events.PURCHASE_INIT, {
+                    slug
+                });
+            }
+        };
+    }
+
+    private originalPostEvent(eventType, callback, eventData) {
+        if (!callback) {
+            callback = function () {};
+        }
+        if (eventData === undefined) {
+            eventData = '';
+        }
+        console.log('[Telegram.WebView] > postEvent', eventType, eventData);
+
+        if (window.TelegramWebviewProxy !== undefined) {
+            window.TelegramWebviewProxy.postEvent(eventType, JSON.stringify(eventData));
+            callback();
+        }
+        else if (window.external && 'notify' in window.external) {
+            window.external.notify(JSON.stringify({eventType: eventType, eventData: eventData}));
+            callback();
+        }
+        else if (window.Telegram.WebView?.isIframe) {
+            try {
+                var trustedTarget = 'https://web.telegram.org';
+                // For now we don't restrict target, for testing purposes
+                trustedTarget = '*';
+                window.parent.postMessage(JSON.stringify({eventType: eventType, eventData: eventData}), trustedTarget);
+                callback();
+            } catch (e) {
+                callback(e);
+            }
+        }
+        else {
+            callback({notAvailable: true});
+        }
+    };
 }