qr login with telegram

src/app/components/telegram-login/telegram-login.component.ts

@@ -1,6 +1,8 @@
-import { Component, ChangeDetectionStrategy, inject, signal, OnInit, OnDestroy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, inject, signal, computed, effect, OnDestroy } from '@angular/core';
 import { AuthService } from '../../services/auth.service';
+import { CartService } from '../../services/cart.service';
 import { TranslatePipe } from '../../i18n/translate.pipe';
+import { getDiscountedPrice } from '../../utils/item.utils';
 
 @Component({
   selector: 'app-telegram-login',
@@ -9,17 +11,28 @@ import { TranslatePipe } from '../../i18n/translate.pipe';
   styleUrls: ['./telegram-login.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class TelegramLoginComponent implements OnInit, OnDestroy {
+export class TelegramLoginComponent implements OnDestroy {
   private authService = inject(AuthService);
+  private cartService = inject(CartService);
 
   showDialog = this.authService.showLoginDialog;
   status = this.authService.status;
+
   loginUrl = signal('');
+  qrToken = signal('');
+  qrStatus = signal<'loading' | 'ready' | 'expired' | 'error'>('loading');
+  encodedQrUrl = computed(() => encodeURIComponent(this.loginUrl()));
 
   private pollTimer?: ReturnType<typeof setInterval>;
 
-  ngOnInit(): void {
-    this.loginUrl.set(this.authService.getTelegramLoginUrl());
+  constructor() {
+    effect(() => {
+      if (this.showDialog()) {
+        this.initQrLogin();
+      } else {
+        this.stopPolling();
+      }
+    });
   }
 
   ngOnDestroy(): void {
@@ -31,32 +44,87 @@ export class TelegramLoginComponent implements OnInit, OnDestroy {
     this.stopPolling();
   }
 
-  /** Open Telegram login link and start polling for session */
   openTelegramLogin(): void {
     window.open(this.loginUrl(), '_blank');
-    this.startPolling();
+    if (!this.pollTimer) {
+      this.startPolling(this.qrToken());
+    }
   }
 
-  /** Start polling the backend to detect when user completes Telegram auth */
-  private startPolling(): void {
+  refreshQr(): void {
     this.stopPolling();
-    // Check every 3 seconds for up to 5 minutes
+    this.initQrLogin();
+  }
+
+  private initQrLogin(): void {
+    this.qrStatus.set('loading');
+    this.authService.createQrToken().subscribe({
+      next: (res) => {
+        this.loginUrl.set(res.url);
+        this.qrToken.set(res.token);
+        this.qrStatus.set('ready');
+        this.startPolling(res.token);
+      },
+      error: () => {
+        this.loginUrl.set(this.authService.getTelegramLoginUrl());
+        this.qrStatus.set('error');
+      }
+    });
+  }
+
+  private startPolling(token: string): void {
+    this.stopPolling();
+    if (!token) return;
+
     let checks = 0;
     this.pollTimer = setInterval(() => {
       checks++;
-      if (checks > 100) { // 100 * 3s = 5 min
+      if (checks > 100) {
         this.stopPolling();
+        this.qrStatus.set('expired');
         return;
       }
-      this.authService.checkSession();
-      // If authenticated, stop polling and close dialog
-      if (this.authService.isAuthenticated()) {
-        this.stopPolling();
-        this.authService.hideLogin();
-      }
+
+      this.authService.pollQrToken(token).subscribe({
+        next: (res) => {
+          switch (res.status) {
+            case 'confirmed':
+              this.stopPolling();
+              if (res.session) {
+                this.syncCartAndComplete(res.session.sessionId);
+              } else {
+                this.authService.onTelegramLoginComplete();
+              }
+              break;
+            case 'expired':
+              this.stopPolling();
+              this.qrStatus.set('expired');
+              break;
+          }
+        },
+        error: () => {
+          // Network error — keep polling
+        }
+      });
     }, 3000);
   }
 
+  private syncCartAndComplete(sessionId: string): void {
+    const cartItems = this.cartService.items().map(item => ({
+      itemID: item.itemID,
+      quantity: item.quantity,
+      colour: item.colour || '',
+      size: item.size || '',
+      price: item.discount > 0
+        ? item.price * (1 - item.discount / 100)
+        : item.price,
+    }));
+
+    this.authService.syncCart(sessionId, cartItems).subscribe(() => {
+      this.authService.onTelegramLoginComplete();
+    });
+  }
+
   private stopPolling(): void {
     if (this.pollTimer) {
       clearInterval(this.pollTimer);