fixes

src/app/pages/cart/cart.component.ts

@@ -182,37 +182,45 @@ export class CartComponent implements OnDestroy {
   }
 
   createPayment(): void {
-    const telegramUsername = this.getTelegramUsername();
-    const userId = this.getUserId();
-    const orderId = this.generateOrderId();
+    const sessionId = this.authService.session()?.sessionId || '';
+    if (!sessionId) {
+      this.paymentStatus.set('timeout');
+      return;
+    }
 
-    const paymentData = {
-      amount: this.totalPrice(),
-      currency: this.langService.currentCurrency(),
-      siteuserID: userId,
-      siteorderID: orderId,
-      redirectUrl: '',
-      telegramUsername: telegramUsername,
-      items: this.items().map((item: CartItem) => ({
-        itemID: item.itemID,
-        price: item.discount > 0 
-          ? item.price * (1 - item.discount / 100)
-          : item.price,
-        name: item.name,
-        quantity: item.quantity
-      }))
-    };
+    // First sync cart items to server via websession, then create QR
+    const cartItems = this.items().map((item: CartItem) => ({
+      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.apiService.createPayment(paymentData).subscribe({
-      next: (response) => {
-        this.paymentId.set(response.qrId);
-        this.qrCodeUrl.set(response.qrUrl);
-        this.paymentUrl.set(response.payload);
-        this.paymentStatus.set('waiting');
-        this.startPolling();
+    this.apiService.addToCart(sessionId, cartItems).subscribe({
+      next: () => {
+        this.apiService.createPayment(sessionId).subscribe({
+          next: (response) => {
+            this.paymentId.set(response.qrId);
+            this.qrCodeUrl.set(response.qrUrl);
+            this.paymentUrl.set(response.Payload);
+            this.paymentStatus.set('waiting');
+            this.startPolling();
+          },
+          error: (err) => {
+            console.error('Error creating payment:', err);
+            this.paymentStatus.set('timeout');
+            if (this.closeTimeout) clearTimeout(this.closeTimeout);
+            this.closeTimeout = setTimeout(() => {
+              this.closePaymentPopup();
+            }, PAYMENT_ERROR_CLOSE_MS);
+          }
+        });
       },
       error: (err) => {
-        console.error('Error creating payment:', err);
+        console.error('Error syncing cart:', err);
         this.paymentStatus.set('timeout');
         if (this.closeTimeout) clearTimeout(this.closeTimeout);
         this.closeTimeout = setTimeout(() => {
@@ -228,7 +236,8 @@ export class CartComponent implements OnDestroy {
       .pipe(
         take(this.maxChecks), // maximum 36 checks (3 minutes)
         switchMap(() => {
-          return this.apiService.checkPaymentStatus(this.paymentId());
+          const sessionId = this.authService.session()?.sessionId || '';
+          return this.apiService.checkPaymentStatus(sessionId, this.paymentId());
         })
       )
       .subscribe({
@@ -283,27 +292,6 @@ export class CartComponent implements OnDestroy {
     }
   }
 
-  private getTelegramUsername(): string {
-    if (typeof window !== 'undefined' && window.Telegram?.WebApp?.initDataUnsafe?.user) {
-      const user = window.Telegram.WebApp.initDataUnsafe.user;
-      return user.username || 'nontelegram';
-    }
-    return 'nontelegram';
-  }
-
-  private getUserId(): string {
-    if (typeof window !== 'undefined' && window.Telegram?.WebApp?.initDataUnsafe?.user) {
-      return window.Telegram.WebApp.initDataUnsafe.user.id.toString();
-    }
-    return `web_${Date.now()}`;
-  }
-
-  private generateOrderId(): string {
-    const timestamp = Date.now();
-    const random = Math.random().toString(36).substring(2, 8);
-    return `order_${timestamp}_${random}`;
-  }
-
   submitEmail(): void {
     // Mark both fields as touched
     this.emailTouched.set(true);