marketplaces/src/app/pages/cart/cart.component.html

<div [class]="isnovo ? 'cart-container novo' : 'cart-container dexar'">
  <div class="cart-header">
    <h1>{{ 'cart.title' | translate }}</h1>
    @if (itemCount() > 0) {
      <button class="clear-cart-btn" (click)="clearCart()">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
        </svg>
        {{ 'cart.clear' | translate }}
      </button>
    }
  </div>

  @if (itemCount() === 0) {
    <div class="empty-cart">
      <div class="empty-icon">
        <app-empty-cart-icon />
      </div>
      <h2>{{ 'cart.empty' | translate }}</h2>
      <p>{{ 'cart.emptyDesc' | translate }}</p>
      <a [routerLink]="'/' | langRoute" class="shop-btn">{{ 'cart.goShopping' | translate }}</a>
    </div>
  }

  @if (itemCount() > 0) {
    <div class="cart-content">
      <div class="cart-items">
        @for (item of items(); track trackByItemId($index, item)) {
          <div class="cart-item-wrapper" 
               [class.swiped]="swipedItemId() === item.itemID"
               (touchstart)="onSwipeStart(item.itemID, $event)">
            <div class="cart-item">
              <a [routerLink]="['/item', item.itemID] | langRoute" class="item-image">
                <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">{{ 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"/>
                    </svg>
                  </button>
                </div>
                
                <p class="item-description">{{ itemDesc(item) || '' }}...</p>

                @if (item.colour || (item.size && item.size.toLowerCase() !== 'default')) {
                  <div class="cart-item-variants">
                    @if (item.colour) {
                      <span class="cart-variant cart-variant-colour">
                        {{ 'itemDetail.colour' | translate }}:
                        <span class="cart-colour-swatch" [style.background-color]="item.colour" [title]="item.colour"></span>
                      </span>
                    }
                    @if (item.size && item.size.toLowerCase() !== 'default') {
                      <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 }} {{ item.currency }}</span>
                        <span class="current-price">{{ getDiscountedPrice(item) | number:'1.2-2' }} {{ item.currency }}</span>
                      </div>
                    } @else {
                      <span class="current-price">{{ item.price }} {{ item.currency }}</span>
                    }

                    @if (item.deliveryPrice != null) {
                      <span class="delivery-price">
                        {{ 'cart.deliveryLabel' | translate }}: {{ item.deliveryPrice | number:'1.2-2' }} {{ item.currency }}
                      </span>
                    }
                  </div>

                  <div class="quantity-controls">
                    <button class="qty-btn" (click)="decreaseQuantity(item.itemID, item.quantity)" [disabled]="item.quantity <= 1">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <path d="M5 12h14"/>
                      </svg>
                    </button>
                    <span class="qty-value">{{ item.quantity }}</span>
                    <button class="qty-btn" (click)="increaseQuantity(item.itemID, item.quantity)">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                        <path d="M12 5v14M5 12h14"/>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            
            <button class="delete-btn-mobile" (click)="removeItem(item.itemID)">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" stroke="white" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </button>
          </div>
        }
      </div>

      <div class="cart-summary">
        <div class="summary-header">
          <h3>{{ 'cart.total' | translate }}</h3>
        </div>

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

        @if (hasDeliveryPrice()) {
          <div class="summary-row delivery">
            <span>{{ 'cart.deliveryLabel' | translate }}</span>
            <span class="value">{{ totalDeliveryPrice() | number:'1.2-2' }} {{ currentCurrency }}</span>
          </div>
        }

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

        <div class="terms-agreement">
          <label class="checkbox-container">
            <input 
              type="checkbox" 
              [(ngModel)]="termsAccepted"
              id="terms-checkbox"
            />
            <span class="checkmark"></span>
            <span class="terms-text">
              {{ 'cart.agreeWith' | translate }}
              <a [routerLink]="'/public-offer' | langRoute" target="_blank">{{ 'cart.publicOffer' | translate }}</a>, 
              <a [routerLink]="'/return-policy' | langRoute" target="_blank">{{ 'cart.returnPolicy' | translate }}</a>,
              <a [routerLink]="'/guarantee' | langRoute" target="_blank">{{ 'cart.guaranteeTerms' | translate }}</a> {{ 'cart.and' | translate }}
              <a [routerLink]="'/privacy-policy' | langRoute" target="_blank">{{ 'cart.privacyPolicy' | translate }}</a>
            </span>
          </label>
        </div>

        <button 
          class="checkout-btn" 
          (click)="checkout()"
          [class.disabled]="!termsAccepted || !isAuthenticated()"
          [disabled]="!termsAccepted || !isAuthenticated()"
        >
          {{ '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>
        }
      </div>
    </div>
  }
</div>

<!-- Payment Popup Modal -->
@if (showPaymentPopup()) {
  <div class="payment-modal-overlay">
    <div class="payment-modal">
      <button class="close-modal-btn" (click)="closePaymentPopup()" [attr.aria-label]="'cart.close' | translate">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </button>
      @if (paymentStatus() === 'creating') {
        <div class="payment-status-screen">
          <div class="spinner-large"></div>
          <h2>{{ 'cart.creatingPayment' | translate }}</h2>
          <p>{{ 'cart.waitFewSeconds' | translate }}</p>
        </div>
      }

      @if (paymentStatus() === 'waiting') {
        <div class="payment-active">
          <h2>{{ 'cart.scanQr' | translate }}</h2>
          
          <div class="qr-section">
            <div class="qr-wrapper">
              <img [src]="qrCodeUrl()" alt="QR код для оплаты" class="qr-code" />
              <div class="scan-line"></div>
            </div>
          </div>

          <div class="payment-info">
            <div class="payment-amount">
              <span class="label">{{ 'cart.amountToPay' | translate }}</span>
              <span class="amount">{{ totalPrice() | number:'1.2-2' }} {{ currentCurrency }}</span>
            </div>
            
            <div class="waiting-indicator">
              <div class="pulse-dot"></div>
              <span>{{ 'cart.waitingPayment' | translate }}</span>
            </div>
          </div>

          <div class="payment-actions">
            <button class="copy-btn" (click)="copyPaymentLink()">
              {{ linkCopied() ? ('cart.copied' | translate) : ('cart.copyLink' | translate) }}
            </button>
            <a [href]="paymentUrl()" target="_blank" rel="noopener noreferrer" class="open-btn">
              {{ 'cart.openNewTab' | translate }}
            </a>
          </div>
        </div>
      }

      @if (paymentStatus() === 'error') {
        <div class="payment-status-screen error">
          <div class="error-icon">!</div>
          <h2>{{ 'cart.paymentError' | translate }}</h2>
          <p>{{ 'cart.paymentErrorDesc' | translate }}</p>

          <div class="payment-error-actions">
            <button class="retry-payment-btn" (click)="retryPayment()">
              {{ 'cart.retryPayment' | translate }}
            </button>
          </div>
        </div>
      }

      @if (paymentStatus() === 'success') {
        <div class="payment-status-screen success">
          <div class="success-icon">✓</div>
          <h2>{{ 'cart.paymentSuccess' | translate }}</h2>
          <!-- <p class="success-text">{{ 'cart.paymentSuccessDesc' | translate }}</p> -->
          
          <!-- <div class="email-form">
            <div class="input-group">
              <input 
                type="email" 
                class="email-input" 
                [class.valid]="emailTouched() && !emailError()"
                [class.invalid]="emailTouched() && emailError()"
                placeholder="your@email.com"
                [value]="userEmail()"
                (input)="onEmailInput($event)"
                (blur)="onEmailBlur()"
                [disabled]="emailSubmitting()"
                maxlength="100"
              />
              @if (emailTouched() && emailError()) {
                <div class="error-message">{{ emailError() }}</div>
              }
            </div>
            
            <div class="input-group">
              <input 
                type="tel" 
                class="email-input phone-input" 
                [class.valid]="phoneTouched() && !phoneError()"
                [class.invalid]="phoneTouched() && phoneError()"
                placeholder="+7 (900) 123-45-67"
                [value]="userPhone()"
                (input)="onPhoneInput($event)"
                (blur)="onPhoneBlur()"
                [disabled]="emailSubmitting()"
                (keyup.enter)="submitEmail()"
              />
              @if (phoneTouched() && phoneError()) {
                <div class="error-message">{{ phoneError() }}</div>
              }
            </div>
            
            <button 
              class="submit-email-btn" 
              (click)="submitEmail()"
              [disabled]="emailSubmitting()"
            >
              @if (emailSubmitting()) {
                <span class="spinner-small"></span>
                {{ 'cart.sending' | translate }}
              } @else {
                {{ 'cart.send' | translate }}
              }
            </button>
          </div> -->
        </div>
      }

      @if (paymentStatus() === 'timeout') {
        <div class="payment-status-screen timeout">
          <div class="timeout-icon">⏱</div>
          <h2>{{ 'cart.paymentTimeout' | translate }}</h2>
          <p>{{ 'cart.paymentTimeoutDesc' | translate }}</p>
          <p class="auto-close">{{ 'cart.autoClose' | translate }}</p>
        </div>
      }
    </div>
  </div>
}

<app-telegram-login />