Merge branch 'back-office-integration'

# Conflicts: # src/app/pages/cart/cart.component.ts # src/app/pages/category/category.component.html # src/app/pages/category/category.component.ts # src/app/pages/item-detail/item-detail.component.html # src/app/pages/item-detail/item-detail.component.ts # src/app/pages/legal/company-details/en/company-details-en.component.html # src/app/pages/legal/company-details/hy/company-details-hy.component.html # src/app/pages/legal/company-details/ru/company-details-ru.component.html # src/app/pages/legal/public-offer/en/public-offer-en.component.html # src/app/pages/legal/public-offer/ru/public-offer-ru.component.html # src/app/pages/search/search.component.ts # src/app/services/api.service.ts
2026-03-24 00:18:13 +04:00
parent 0b3b2ee463 56f4c56b9e
commit 97214c3a90
76 changed files with 6828 additions and 2331 deletions
--- a/src/app/pages/cart/cart.component.html
+++ b/src/app/pages/cart/cart.component.html
@@ -31,12 +31,12 @@
               (touchstart)="onSwipeStart(item.itemID, $event)">
            <div class="cart-item">
              <a [routerLink]="['/item', item.itemID] | langRoute" class="item-image">
-                <img [src]="getMainImage(item)" [alt]="item.name" loading="lazy" />
+                <img [src]="getMainImage(item)" [alt]="itemName(item)" loading="lazy" />
              </a>
              
              <div class="item-info">
                <div class="item-header">
-                  <a [routerLink]="['/item', item.itemID] | langRoute" class="item-name">{{ item.name }}</a>
+                  <a [routerLink]="['/item', item.itemID] | langRoute" class="item-name">{{ itemName(item) }}</a>
                  <button class="remove-btn" (click)="removeItem(item.itemID)" title="Remove">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M18 6L6 18M6 6l12 12"/>
@@ -44,17 +44,36 @@
                  </button>
                </div>
                
-                <p class="item-description">{{ item.description.substring(0, 100) }}...</p>
+                <p class="item-description">{{ itemDesc(item) || '' }}...</p>
+
+                @if (item.colour || item.size) {
+                  <div class="cart-item-variants">
+                    @if (item.colour) {
+                      <span class="cart-variant">{{ 'itemDetail.colour' | translate }}: {{ item.colour }}</span>
+                    }
+                    @if (item.size) {
+                      <span class="cart-variant">{{ 'itemDetail.size' | translate }}: {{ item.size }}</span>
+                    }
+                  </div>
+                }
+
+                @if (item.badges && item.badges.length > 0) {
+                  <div class="cart-item-badges">
+                    @for (badge of item.badges; track badge) {
+                      <span class="item-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
+                    }
+                  </div>
+                }

                <div class="item-footer">
                  <div class="item-pricing">
                    @if (item.discount > 0) {
                      <div class="price-with-discount">
-                        <span class="original-price">{{ item.price }} ₽</span>
-                        <span class="current-price">{{ getDiscountedPrice(item) | number:'1.2-2' }} ₽</span>
+                        <span class="original-price">{{ item.price }} {{ item.currency }}</span>
+                        <span class="current-price">{{ getDiscountedPrice(item) | number:'1.2-2' }} {{ item.currency }}</span>
                      </div>
                    } @else {
-                      <span class="current-price">{{ item.price }} ₽</span>
+                      <span class="current-price">{{ item.price }} {{ item.currency }}</span>
                    }
                  </div>

@@ -91,17 +110,17 @@

        <div class="summary-row">
          <span>{{ 'cart.items' | translate }} ({{ itemCount() }})</span>
-          <span class="value">{{ totalPrice() | number:'1.2-2' }} ₽</span>
+          <span class="value">{{ totalPrice() | number:'1.2-2' }} {{ currentCurrency }}</span>
        </div>

        <div class="summary-row delivery">
          <span>{{ 'cart.deliveryLabel' | translate }}</span>
-          <span>0 ₽</span>
+          <span>0 {{ currentCurrency }}</span>
        </div>

        <div class="summary-row total">
          <span>{{ 'cart.toPay' | translate }}</span>
-          <span class="total-price">{{ totalPrice() | number:'1.2-2' }} ₽</span>
+          <span class="total-price">{{ totalPrice() | number:'1.2-2' }} {{ currentCurrency }}</span>
        </div>

        <div class="terms-agreement">
@@ -130,6 +149,36 @@
        >
          {{ 'cart.checkout' | translate }}
        </button>
+
+        @if (!isAuthenticated()) {
+          <div class="cart-login-gate">
+            <div class="login-gate-icon">
+              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
+              </svg>
+            </div>
+            <p class="login-gate-title">{{ 'cart.loginRequired' | translate }}</p>
+            <p class="login-gate-desc">{{ 'cart.loginRequiredDesc' | translate }}</p>
+
+            <button class="telegram-login-btn" (click)="requestLogin()">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
+              </svg>
+              {{ 'cart.loginWithTelegram' | translate }}
+            </button>
+
+            <div class="login-gate-qr">
+              <p class="qr-hint">{{ 'cart.orScanQr' | translate }}</p>
+              <div class="qr-wrapper">
+                <img [src]="'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + loginUrl()" 
+                     alt="QR Code" 
+                     width="150" 
+                     height="150" 
+                     loading="lazy" />
+              </div>
+            </div>
+          </div>
+        }
      </div>
    </div>
  }
@@ -166,7 +215,7 @@
          <div class="payment-info">
            <div class="payment-amount">
              <span class="label">{{ 'cart.amountToPay' | translate }}</span>
-              <span class="amount">{{ totalPrice() | number:'1.2-2' }} RUB</span>
+              <span class="amount">{{ totalPrice() | number:'1.2-2' }} {{ currentCurrency }}</span>
            </div>
            
            <div class="waiting-indicator">
@@ -256,3 +305,5 @@
    </div>
  </div>
 }
+
+<app-telegram-login />
--- a/src/app/pages/cart/cart.component.scss
+++ b/src/app/pages/cart/cart.component.scss
@@ -364,6 +364,22 @@
    line-height: 1.5;
  }

+  .cart-item-variants {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-top: 4px;
+
+    .cart-variant {
+      font-size: 0.8rem;
+      color: #497671;
+      background: rgba(73, 118, 113, 0.08);
+      padding: 3px 10px;
+      border-radius: 6px;
+      font-weight: 500;
+    }
+  }
+
  .item-footer {
    display: flex;
    justify-content: space-between;
@@ -464,6 +480,22 @@
    line-height: 1.6;
  }

+  .cart-item-variants {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-top: 4px;
+
+    .cart-variant {
+      font-size: 0.8rem;
+      color: #6366f1;
+      background: rgba(99, 102, 241, 0.08);
+      padding: 3px 10px;
+      border-radius: 6px;
+      font-weight: 500;
+    }
+  }
+
  .item-footer {
    display: flex;
    justify-content: space-between;
@@ -689,6 +721,85 @@
      cursor: not-allowed;
    }
  }
+
+  .cart-login-gate {
+    margin-top: 16px;
+    padding: 20px;
+    border-radius: 14px;
+    background: rgba(42, 171, 238, 0.05);
+    border: 1px dashed rgba(42, 171, 238, 0.3);
+    text-align: center;
+
+    .login-gate-icon {
+      margin: 0 auto 10px;
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
+      background: rgba(42, 171, 238, 0.1);
+      color: #2AABEE;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .login-gate-title {
+      margin: 0 0 4px;
+      font-size: 1rem;
+      font-weight: 700;
+      color: #1a1a1a;
+    }
+
+    .login-gate-desc {
+      margin: 0 0 16px;
+      font-size: 0.85rem;
+      color: #6b7280;
+      line-height: 1.4;
+    }
+
+    .telegram-login-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 24px;
+      border: none;
+      border-radius: 10px;
+      background: #2AABEE;
+      color: #fff;
+      font-size: 0.95rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+
+      &:hover {
+        background: #229ED9;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(42, 171, 238, 0.3);
+      }
+    }
+
+    .login-gate-qr {
+      margin-top: 14px;
+
+      .qr-hint {
+        margin: 0 0 8px;
+        font-size: 0.8rem;
+        color: #999;
+      }
+
+      .qr-wrapper {
+        display: inline-flex;
+        padding: 10px;
+        background: #fff;
+        border-radius: 10px;
+        border: 1px solid #e5e7eb;
+
+        img {
+          display: block;
+          border-radius: 4px;
+        }
+      }
+    }
+  }
 }

 // Novo Cart Summary - Green Modern
--- a/src/app/pages/cart/cart.component.ts
+++ b/src/app/pages/cart/cart.component.ts
@@ -2,13 +2,14 @@ import { Component, computed, ChangeDetectionStrategy, signal, OnDestroy, inject
 import { DecimalPipe } from '@angular/common';
 import { Router, RouterLink } from '@angular/router';
 import { FormsModule } from '@angular/forms';
-import { CartService, ApiService, LanguageService } from '../../services';
+import { CartService, ApiService, LanguageService, AuthService } from '../../services';
 import { Item, CartItem } from '../../models';
 import { interval, Subscription } from 'rxjs';
 import { switchMap, take } from 'rxjs/operators';
 import { EmptyCartIconComponent } from '../../components/empty-cart-icon/empty-cart-icon.component';
+import { TelegramLoginComponent } from '../../components/telegram-login/telegram-login.component';
 import { environment } from '../../../environments/environment';
-import { getDiscountedPrice, getMainImage, trackByItemId } from '../../utils/item.utils';
+import { getDiscountedPrice, getMainImage, trackByItemId, getBadgeClass, getTranslatedField } from '../../utils/item.utils';
 import { LangRoutePipe } from '../../pipes/lang-route.pipe';
 import { TranslatePipe } from '../../i18n/translate.pipe';
 import { TranslateService } from '../../i18n/translate.service';
@@ -16,7 +17,7 @@ import { PAYMENT_POLL_INTERVAL_MS, PAYMENT_MAX_CHECKS, PAYMENT_TIMEOUT_CLOSE_MS,

@Component({
  selector: 'app-cart',
-  imports: [DecimalPipe, RouterLink, FormsModule, EmptyCartIconComponent, LangRoutePipe, TranslatePipe],
+  imports: [DecimalPipe, RouterLink, FormsModule, EmptyCartIconComponent, TelegramLoginComponent, LangRoutePipe, TranslatePipe],
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
@@ -29,7 +30,11 @@ export class CartComponent implements OnDestroy {
  isnovo = environment.theme === 'novo';
  
  private i18n = inject(TranslateService);
+  private authService = inject(AuthService);
  
+  isAuthenticated = this.authService.isAuthenticated;
+  loginUrl = signal('');
+
  // Swipe state
  swipedItemId = signal<number | null>(null);

@@ -64,6 +69,11 @@ export class CartComponent implements OnDestroy {
    this.items = this.cartService.items;
    this.itemCount = this.cartService.itemCount;
    this.totalPrice = this.cartService.totalPrice;
+    this.loginUrl.set(this.authService.getTelegramLoginUrl());
+  }
+
+  requestLogin(): void {
+    this.authService.requestLogin();
  }

  ngOnDestroy(): void {
@@ -129,12 +139,22 @@ export class CartComponent implements OnDestroy {
  readonly getMainImage = getMainImage;
  readonly trackByItemId = trackByItemId;
  readonly getDiscountedPrice = getDiscountedPrice;
+  readonly getBadgeClass = getBadgeClass;
+
+  itemName(item: Item): string { return getTranslatedField(item, 'name', this.langService.currentLanguage()); }
+  itemDesc(item: Item): string { return getTranslatedField(item, 'simpleDescription', this.langService.currentLanguage()); }
+  get currentCurrency(): string { return this.langService.currentCurrency(); }

  checkout(): void {
    if (!this.termsAccepted) {
      alert(this.i18n.t('cart.acceptTerms'));
      return;
    }
+    // Auth gate: require Telegram login before payment
+    if (!this.authService.isAuthenticated()) {
+      this.authService.requestLogin();
+      return;
+    }
    this.openPaymentPopup();
  }

@@ -168,7 +188,7 @@ export class CartComponent implements OnDestroy {

    const paymentData = {
      amount: this.totalPrice(),
-      currency: this.items()[0]?.currency || 'RUB',
+      currency: this.langService.currentCurrency(),
      siteuserID: userId,
      siteorderID: orderId,
      redirectUrl: '',