@dropi/ui-components 1.0.0

package/src/components-source/card-product/card-product.component.ts

@@ -0,0 +1,1101 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  SimpleChanges,
+  HostListener,
+} from '@angular/core';
+import { CommonModule, TitleCasePipe } from '@angular/common';
+import { IconComponent } from '../icon/icon.component';
+import { DropiTagComponent } from '../dropi-tag/dropi-tag.component';
+import { CurrencyComponent } from '../../components/currency/currency.component';
+import { environment } from '../../../environments/environment';
+import { SettingsService } from '../../services/setting.service';
+import { AdjustNamePipe } from '@app/pipe/product/adjust-name.pipe';
+import { Howl } from 'howler';
+import { ProductstService } from '@app/pages/service/products/products.service';
+import { OrderManualService } from '@app/services/order-manual.service';
+import { Router } from '@angular/router';
+import { BetaTagComponent } from '@app/components/beta-tag/beta-tag.component';
+import { DropiIlustrationIconComponent } from '../dropi-ilustration-icon/dropi-ilustration-icon.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+export interface ProductData {
+  id: string | number;
+  sku?: string;
+  name: string;
+  type?: string;
+  sale_price: number;
+  suggested_price: number;
+  private_product: boolean;
+  variation_stock?: number;
+  stock_simple: number;
+  is_variation: boolean;
+  favorite: boolean;
+  supplier: {
+    id: number;
+    name: string;
+    category_user: string;
+    icon?: 'verified' | 'premium' | 'exclusive';
+  };
+  categories: Array<{
+    name: string;
+  }>;
+  private_user_stock?: number;
+  legacy_img?: boolean;
+  image: string;
+  // Campos opcionales para mantener compatibilidad
+  category?: string;
+  stock?: number;
+  supplierPrice?: number;
+  suggestedPrice?: number;
+  imageUrl?: string;
+  isFavorite?: boolean;
+}
+
+export type CardState = 'default' | 'hover' | 'select';
+
+@Component({
+  selector: 'dropi-card-product',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IconComponent,
+    DropiTagComponent,
+    CurrencyComponent,
+    TitleCasePipe,
+    AdjustNamePipe,
+    BetaTagComponent,
+    DropiIlustrationIconComponent,
+    TranslateModule
+  ],
+  templateUrl: './card-product.component.html',
+})
+export class CardProductComponent implements OnInit {
+  @Input() product!: ProductData;
+  @Input() state: CardState = 'default';
+  @Input() aS: boolean = true; // Nuevo input para controlar elementos anti-scraping
+  @Input() bettaTester: boolean = false;
+  @Output() onAddToCart = new EventEmitter<ProductData>();
+  @Output() onProductClick = new EventEmitter<ProductData>();
+  @Output() changeFavorite = new EventEmitter<Boolean>();
+
+  public imageError = false;
+  public brandName: string = '';
+  public onFavoriteHover = false; // Nueva propiedad para manejar el hover del favorito
+
+  // Propiedades para almacenar las clases aleatorias generadas una sola vez
+  public randomClasses = {
+    card: '',
+    imageContainer: '',
+    image: '',
+    tags: '',
+    tagsRow: '',
+    favoriteButton: '',
+    productInfo: '',
+    productHeader: '',
+    category: '',
+    stockInfo: '',
+    stockLabel: '',
+    stockValue: '',
+    productName: '',
+    supplierInfo: '',
+    supplierLabel: '',
+    supplierName: '',
+    priceContainer: '',
+    priceItem: '',
+    priceLabel: '',
+    priceValue: '',
+    separator: '',
+    actionButton: '',
+    buttonText: '',
+  };
+
+  // Propiedades para almacenar los arrays anti-scraping generados una sola vez
+  public mixedData = {
+    stockDivs: [] as Array<{ value: number; class: string; isReal: boolean }>,
+    supplierPriceDivs: [] as Array<{ value: number; class: string; isReal: boolean }>,
+    suggestedPriceDivs: [] as Array<{ value: number; class: string; isReal: boolean }>,
+  };
+
+  // Propiedades para almacenar los estilos falsos generados una sola vez
+  public fakeStyles = {
+    stock: '',
+    price: '',
+  };
+
+  // Nueva propiedad para detectar si es móvil
+  public isMobile: boolean = false;
+
+  constructor(
+    private settingService: SettingsService,
+    private favoriteService: ProductstService,
+    private orderManual: OrderManualService,
+    private router: Router,
+  ) {}
+
+  ngOnInit() {
+    this.brandName = this.settingService.getBrandInfo()?.name?.toLowerCase() || 'dropi';
+    this.generateRandomClasses();
+    this.generateFakeStyles();
+    this.generateMixedData();
+    this.checkScreenSize(); // Verificar tamaño de pantalla al inicializar
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // Regenerar los datos mezclados cuando cambie el producto o aS
+    if (changes['product'] || changes['aS']) {
+      this.generateMixedData();
+    }
+  }
+
+  // Listener para detectar cambios en el tamaño de pantalla
+  @HostListener('window:resize', ['$event'])
+  onResize(event: any) {
+    this.checkScreenSize();
+  }
+
+  // Método para verificar si es móvil
+  private checkScreenSize() {
+    this.isMobile = window.innerWidth <= 420;
+  }
+
+  // Método para generar todas las clases aleatorias una sola vez
+  private generateRandomClasses() {
+    this.randomClasses = {
+      card: this.generateRandomClass('dropi-card-product'),
+      imageContainer: this.generateRandomClass('product-image-container'),
+      image: this.generateRandomClass('product-image'),
+      tags: this.generateRandomClass('product-tags'),
+      tagsRow: this.generateRandomClass('tags-row'),
+      favoriteButton: this.generateRandomClass('favorite-button'),
+      productInfo: this.generateRandomClass('product-info'),
+      productHeader: this.generateRandomClass('product-header'),
+      category: this.generateRandomClass('category'),
+      stockInfo: this.generateRandomClass('stock-info'),
+      stockLabel: this.generateRandomClass('stock-label'),
+      stockValue: this.generateRandomClass('stock-value'),
+      productName: this.generateRandomClass('product-name'),
+      supplierInfo: this.generateRandomClass('supplier-info'),
+      supplierLabel: this.generateRandomClass('supplier-label'),
+      supplierName: this.generateRandomClass('supplier-name'),
+      priceContainer: this.generateRandomClass('price-container'),
+      priceItem: this.generateRandomClass('price-item'),
+      priceLabel: this.generateRandomClass('price-label'),
+      priceValue: this.generateRandomClass('price-value'),
+      separator: this.generateRandomClass('separator'),
+      actionButton: this.generateRandomClass('action-button'),
+      buttonText: this.generateRandomClass('button-text'),
+    };
+  }
+
+  // Método para generar todos los arrays anti-scraping una sola vez
+  private generateMixedData() {
+    this.mixedData.stockDivs = this.generateMixedStockDivs();
+    this.mixedData.supplierPriceDivs = this.generateMixedSupplierPriceDivs();
+    this.mixedData.suggestedPriceDivs = this.generateMixedSuggestedPriceDivs();
+  }
+
+  // Método para generar todos los estilos falsos una sola vez
+  private generateFakeStyles() {
+    this.fakeStyles.stock = this.generateFakeStyleVariant();
+    this.fakeStyles.price = this.generateFakeStyleVariant();
+  }
+
+  get imageUrl(): string | undefined {
+    // Si el producto tiene el campo 'image' directamente (nueva estructura)
+    if (this.product && this.product.image) {
+      // Si legacy_img es true, usar img_server, de lo contrario usar S3
+      if (this.product.legacy_img === true) {
+        return `${environment.img_server}/${this.product.image}`;
+      } else {
+        return `${environment.AWS3.cloudfront_server}/${this.product.image}`;
+      }
+    }
+
+    // Fallback: mantener compatibilidad con imageUrl directo
+    if (this.product && this.product.imageUrl) {
+      return this.product.imageUrl;
+    }
+
+    return undefined;
+  }
+
+  onError(event: any) {
+    this.imageError = true;
+    if (this.brandName === 'dropi') {
+      event.target.src = './assets/utils/no-image.jpg';
+    } else {
+      event.target.src = './assets/utils/wb-no-image.jpg';
+    }
+  }
+
+  get productTags(): Array<{
+    text: string;
+    type: 'primary' | 'secondary';
+    state: 'default' | 'warning' | 'info';
+    showIcon?: boolean;
+    icon?: string;
+  }> {
+    const tags = [];
+
+    if (this.product?.type?.includes('variable')) {
+      tags.push({ text: 'Variable', type: 'primary' as const, state: 'default' as const });
+    }
+
+    if (this.product?.type?.includes('privado')) {
+      tags.push({
+        text: null,
+        type: 'primary' as const,
+        state: 'warning' as const,
+        showIcon: true,
+        icon: 'Lock',
+      });
+    }
+
+    if (this.product?.type?.includes('combo')) {
+      tags.push({ text: 'Combo', type: 'primary' as const, state: 'info' as const });
+    }
+
+    return tags;
+  }
+
+  // Método para obtener el stock correcto según el tipo de producto
+  private getProductStock(): number {
+    if (this.product?.type === 'VARIABLE' && this.product?.is_variation) {
+      return this.product?.variation_stock || 0;
+    }
+    return this.product?.stock_simple || 0;
+  }
+
+  get stockStatus(): 'success' | 'warning' | 'error' {
+    const stock = this.getProductStock();
+    if (stock === 0) return 'error';
+    if (stock <= 10) return 'warning';
+    return 'success';
+  }
+
+  get stockStatusClass(): string {
+    switch (this.stockStatus) {
+      case 'success':
+        return 'stock-success';
+      case 'warning':
+        return 'stock-warning';
+      case 'error':
+        return 'stock-error';
+      default:
+        return 'stock-success';
+    }
+  }
+
+  handleAddToCart(): void {
+    const stock = this.getProductStock();
+    if (stock > 0) {
+      this.onAddToCart.emit(this.product);
+      let productId = Number(this.product.id);
+      this.orderManual.setModalOpen(true);
+      this.orderManual.clearProductsIds();
+      this.orderManual.setProductsIds(productId);
+    }
+  }
+
+  handleFavoriteToggle(): void {
+    // Cambiar el estado favorito internamente usando suscripción en addFavoriteProduct de ProductstService
+    if (!this.product || !this.product.id) {
+      console.error('Product or product ID is not defined');
+      return;
+    }
+    let body = {
+      product_id: this.product.id,
+    };
+
+    if (!this.product.favorite) {
+      console.log('Adding product to favorites:', this.product.id);
+      this.favoriteService.addFavoriteProduct(body).subscribe({
+        next: (response: any) => {
+          console.log('Favorite toggled successfully:', response);
+          if (response?.is_successful) {
+            this.product.favorite = true;
+            this.playAudio();
+            // Emitir evento de cambio de favorito
+            this.changeFavorite.emit(true);
+          }
+        },
+        error: (error) => {
+          console.error('Error toggling favorite:', error);
+        },
+      });
+    } else {
+      this.favoriteService.removeFavoriteProduct(body).subscribe({
+        next: (response: any) => {
+          console.log('Favorite removed successfully:', response);
+          if (response?.is_successful) {
+            this.product.favorite = false;
+            this.playAudio();
+            // Emitir evento de cambio de favorito
+            this.changeFavorite.emit(false);
+          }
+        },
+        error: (error) => {
+          console.error('Error removing favorite:', error);
+        },
+      });
+    }
+  }
+
+  // Método para obtener el color del icono favorito con hover
+  getFavoriteIconColor(): string {
+    if (this.product?.favorite) {
+      return '#fff'; // Blanco cuando es favorito
+    }
+    return this.onFavoriteHover ? '#f49a3d' : '#858ea6'; // Naranja en hover, gris normal
+  }
+
+  playAudio() {
+    let sound = new Howl({
+      src: ['assets/audio/pop.mp3'],
+    });
+    sound.volume(0.4);
+    sound.play();
+  }
+
+  getProductDetails(): void {
+    // if (this.noClick) {
+    //   return;
+    // }
+    let nameProductUrl = this.product.name;
+
+    if (!nameProductUrl || typeof nameProductUrl !== 'string') {
+      nameProductUrl = 'producto'; // Fallback por defecto
+    } else {
+      const cleanName = nameProductUrl
+        .normalize('NFD') // Normaliza a Unicode con descomposición
+        .replace(/[\u0300-\u036f]/g, '') // Elimina las marcas diacríticas
+        .replace(/[\u{1F600}-\u{1F64F}]/gu, '') // Elimina emoticonos
+        .replace(/[\u{1F300}-\u{1F5FF}]/gu, '') // Elimina símbolos y pictogramas misceláneos
+        .replace(/[\u{1F680}-\u{1F6FF}]/gu, '') // Elimina símbolos de transporte y mapas
+        .replace(/[\u{1F700}-\u{1F77F}]/gu, '') // Elimina símbolos alquímicos
+        .replace(/[\u{2600}-\u{26FF}]/gu, '') // Elimina símbolos misceláneos
+        .replace(/[\u{2700}-\u{27BF}]/gu, '') // Elimina Dingbats
+        .replace(/[\/\\]/g, '') // Elimina barras que pueden afectar URLs
+        .replace(/[&%#?]/g, '') // Elimina caracteres problemáticos para URLs
+        .replace(/[<>"\[\]{}|^`]/g, '') // Elimina caracteres no permitidos en URLs
+        .replace(/[^a-zA-Z0-9\süÜñÑ]/g, '') // Elimina los caracteres especiales excepto ü, Ü, ñ, Ñ
+        .replace(/\s+/g, '-') // Reemplaza espacios en blanco con guiones
+        .replace(/-+/g, '-') // Reemplaza múltiples guiones consecutivos por uno solo
+        .replace(/^-+|-+$/g, '') // Elimina guiones al principio o al final
+        .toLowerCase() // Convierte a minúsculas
+        .substring(0, 100); // Limita la longitud para evitar URLs muy largas
+
+      // Verificar que el resultado no esté vacío después de la limpieza
+      nameProductUrl = cleanName || 'producto';
+    }
+
+    const url = `/dashboard/product-details/${this.product.id}/${nameProductUrl}`;
+
+    // Abre la URL en una nueva ventana
+    window.open(url, '_blank');
+  }
+
+  getProvidersDetails(): void {
+    console.log('getProvidersDetails called');
+
+    const cleanName = this.product?.supplier?.name
+      .normalize('NFD') // Normaliza a Unicode con descomposición
+      .replace(/[\u0300-\u036f]/g, '') // Elimina las marcas diacríticas
+      .replace(/[\u{1F600}-\u{1F64F}]/gu, '') // Elimina emoticonos
+      .replace(/[\u{1F300}-\u{1F5FF}]/gu, '') // Elimina símbolos y pictogramas misceláneos
+      .replace(/[\u{1F680}-\u{1F6FF}]/gu, '') // Elimina símbolos de transporte y mapas
+      .replace(/[\u{1F700}-\u{1F77F}]/gu, '') // Elimina símbolos alquímicos
+      .replace(/[\u{2600}-\u{26FF}]/gu, '') // Elimina símbolos misceláneos
+      .replace(/[\u{2700}-\u{27BF}]/gu, '') // Elimina Dingbats
+      .replace(/[\/\\]/g, '') // Elimina barras que pueden afectar URLs
+      .replace(/[&%#?]/g, '') // Elimina caracteres problemáticos para URLs
+      .replace(/[<>"\[\]{}|^`]/g, '') // Elimina caracteres no permitidos en URLs
+      .replace(/[^a-zA-Z0-9\süÜñÑ]/g, '') // Elimina los caracteres especiales excepto ü, Ü, ñ, Ñ
+      .replace(/\s+/g, '-') // Reemplaza espacios en blanco con guiones
+      .replace(/-+/g, '-') // Reemplaza múltiples guiones consecutivos por uno solo
+      .replace(/^-+|-+$/g, '') // Elimina guiones al principio o al final
+      .toLowerCase() // Convierte a minúsculas
+      .substring(0, 100); // Limita la longitud para evitar URLs muy largas
+
+    // solo si esta en este path dashboard/search abrir en una nueva ventana
+    if (this.router.url === '/dashboard/search') {
+      const url = `/dashboard/provider/${this.product.supplier.id}/${cleanName}`;
+      window.open(url, '_blank');
+      return;
+    } else {
+      this.router.navigate(['/dashboard/provider', this.product.supplier.id, cleanName]);
+    }
+  }
+
+  hasStock(): boolean {
+    const stock = this.getProductStock();
+    return stock > 0;
+  }
+
+  // Métodos para estilos inline
+  getCardStyles(): string {
+    const baseStyles = `
+      position: relative;
+      background: #ffffff;
+      border-radius: 8px;
+      overflow: hidden;
+      transition: all 0.2s ease-in-out;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-sizing: border-box;
+      width: 100%;
+      max-width: 450px;
+    `;
+
+    let stateStyles = '';
+    switch (this.state) {
+      case 'hover':
+        stateStyles =
+          'box-shadow: 0.5px 4px 8px 0px rgba(0, 0, 0, 0.08); transform: scale(1.02) translateY(-2px);';
+        break;
+      case 'select':
+        stateStyles = 'border: 1px solid #f49a3d;';
+        break;
+      default:
+        stateStyles = 'box-shadow: none;';
+    }
+
+    return baseStyles + stateStyles;
+  }
+
+  getRandomProviderCategoryStyles(): string {
+    // Retorna una clase aleatoria para la categoría del proveedor
+    return `
+    top: -20px;
+    left: 2px;
+    position: absolute;
+    `;
+  }
+
+  getImageContainerStyles(): string {
+    return `
+      padding: 4px;
+      flex-shrink: 0;
+    `;
+  }
+
+  getImageStyles(): string {
+    return `
+      position: relative;
+      width: 100%;
+      aspect-ratio: 1;
+      border-radius: 8px;
+      border: 1px solid #c3c9d9;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #f8f9fa;
+    `;
+  }
+
+  getTagsContainerStyles(): string {
+    return `
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      z-index: 2;
+    `;
+  }
+
+  getTagsRowStyles(): string {
+    return `
+      display: flex;
+      gap: 5px;
+    `;
+  }
+
+  getFavoriteButtonStyles(): string {
+    const baseStyles = `
+      position: absolute;
+      bottom: 5px;
+      right: 6px;
+      border-radius: 8px;
+      padding: 12px;
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+    `;
+
+    // Estilos específicos según si es favorito o no
+    const favoriteStyles = this.product?.favorite
+      ? `
+          background: var(--Primary-Primary-500, #f49a3d);
+          border: 1px solid var(--Primary-Primary-500, #f49a3d);
+        `
+      : `
+          background: #ffffff;
+          border: 1px solid #858ea6;
+        `;
+
+    return baseStyles + favoriteStyles;
+  }
+
+  getProductInfoStyles(): string {
+    return `
+      position: relative;
+      padding: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      flex: 1;
+      justify-content: space-between;
+    `;
+  }
+
+  getProductHeaderStyles(): string {
+    return `
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      height: 26px;
+    `;
+  }
+
+  getCategoryStyles(): string {
+    return `
+      color: #69738c;
+      font-family: 'Inter', sans-serif;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.5;
+      flex: 1;
+    `;
+  }
+
+  getStockInfoStyles(): string {
+    return `
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      font-family: 'Inter', sans-serif;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.5;
+    `;
+  }
+
+  getStockLabelStyles(): string {
+    return `
+      color: #69738c;
+    `;
+  }
+
+  getStockValueStyles(): string {
+    const stock = this.getProductStock();
+    let color = '#0abb87'; // success
+    if (stock === 0) {
+      color = '#ef4444'; // error
+    } else if (stock <= 10) {
+      color = '#f59e0b'; // warning
+    }
+
+    return `
+      font-weight: 500;
+      color: ${color};
+    `;
+  }
+
+  getProductNameStyles(): string {
+    return `
+      color: #32394d;
+      font-family: 'Inter', sans-serif;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 1.5;
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    `;
+  }
+
+  getSupplierInfoStyles(): string {
+    return `
+      font-family: 'Inter', sans-serif;
+      font-size: 12px;
+      line-height: 1.2;
+    `;
+  }
+
+  getSupplierLabelStyles(): string {
+    return `
+      color: #69738c;
+      font-weight: 400;
+    `;
+  }
+
+  getSupplierNameStyles(): string {
+    return `
+      color: #50a5f1;
+      font-weight: 400;
+      margin-left: 4px;
+    `;
+  }
+
+  getPriceContainerStyles(): string {
+    return `
+      display: flex;
+      gap: 8px;
+      margin-top: 4px;
+    `;
+  }
+
+  getPriceItemStyles(): string {
+    return `
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    `;
+  }
+
+  getPriceLabelStyles(): string {
+    const baseStyles = `
+      color: #69738c;
+      font-family: 'Inter', sans-serif;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.5;
+    `;
+
+    // Estilos condicionales basados en el tamaño de pantalla
+    const responsiveStyles = this.isMobile
+      ? `
+        height: auto;
+        min-width: auto;
+        margin-bottom: 6px;
+      `
+      : `
+        height: 18px;
+        min-width: max-content;
+      `;
+
+    return baseStyles + responsiveStyles;
+  }
+
+  getPriceValueStyles(): string {
+    return `
+      color: #32394d;
+      font-family: 'Inter', sans-serif;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 1.1;
+      margin-top: 2px;
+    `;
+  }
+
+  getSeparatorStyles(): string {
+    return `
+      height: 1px;
+      background: #e6eaf2;
+      margin: 0;
+      flex-shrink: 0;
+    `;
+  }
+
+  getActionButtonStyles(): string {
+    const stock = this.getProductStock();
+    const baseStyles = `
+      background: #ffffff;
+      border: none;
+      border-top: 1px solid #e6eaf2;
+      padding: 12px;
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      height: 40px;
+      flex-shrink: 0;
+    `;
+
+    const disabledStyles = stock === 0 ? 'opacity: 0.3; cursor: not-allowed;' : '';
+
+    return baseStyles + disabledStyles;
+  }
+
+  getButtonTextStyles(): string {
+    return `
+      font-family: 'Inter', sans-serif;
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 1.1;
+      color: #f49a3d;
+      text-align: center;
+      white-space: nowrap;
+    `;
+  }
+
+  // Métodos para generar clases aleatorias
+  private generateRandomClass(baseName: string): string {
+    const randomPrefix = Math.random().toString(36).substring(2, 8);
+    const randomSuffix = Math.random().toString(36).substring(2, 8);
+    return `${randomPrefix}-${baseName}-${randomSuffix}`;
+  }
+
+  // Métodos para obtener las clases aleatorias (ahora retornan valores fijos)
+  getRandomCardClass(): string {
+    return this.randomClasses.card;
+  }
+
+  getRandomImageContainerClass(): string {
+    return this.randomClasses.imageContainer;
+  }
+
+  getRandomImageClass(): string {
+    return this.randomClasses.image;
+  }
+
+  getRandomTagsClass(): string {
+    return this.randomClasses.tags;
+  }
+
+  getRandomTagsRowClass(): string {
+    return this.randomClasses.tagsRow;
+  }
+
+  getRandomFavoriteButtonClass(): string {
+    return this.randomClasses.favoriteButton;
+  }
+
+  getRandomProductInfoClass(): string {
+    return this.randomClasses.productInfo;
+  }
+
+  getRandomProductHeaderClass(): string {
+    return this.randomClasses.productHeader;
+  }
+
+  getRandomCategoryClass(): string {
+    return this.randomClasses.category;
+  }
+
+  getRandomStockInfoClass(): string {
+    return this.randomClasses.stockInfo;
+  }
+
+  getRandomStockLabelClass(): string {
+    return this.randomClasses.stockLabel;
+  }
+
+  getRandomStockValueClass(): string {
+    return this.randomClasses.stockValue;
+  }
+
+  getRandomProductNameClass(): string {
+    return this.randomClasses.productName;
+  }
+
+  getRandomSupplierInfoClass(): string {
+    return this.randomClasses.supplierInfo;
+  }
+
+  getRandomSupplierLabelClass(): string {
+    return this.randomClasses.supplierLabel;
+  }
+
+  getRandomSupplierNameClass(): string {
+    return this.randomClasses.supplierName;
+  }
+
+  getRandomPriceContainerClass(): string {
+    return this.randomClasses.priceContainer;
+  }
+
+  getRandomPriceItemClass(): string {
+    return this.randomClasses.priceItem;
+  }
+
+  getRandomPriceLabelClass(): string {
+    return this.randomClasses.priceLabel;
+  }
+
+  getRandomPriceValueClass(): string {
+    return this.randomClasses.priceValue;
+  }
+
+  getRandomSeparatorClass(): string {
+    return this.randomClasses.separator;
+  }
+
+  getRandomActionButtonClass(): string {
+    return this.randomClasses.actionButton;
+  }
+
+  getRandomButtonTextClass(): string {
+    return this.randomClasses.buttonText;
+  }
+
+  // Métodos para generar stock falso
+  private generateFakeStockCalculations(): number[] {
+    const realStock = this.getProductStock(); // Usar el método que determina el stock correcto
+
+    // 1. MEJORA: Cantidad variable de elementos falsos (3-8)
+    const fakeCount = Math.floor(Math.random() * 6) + 3; // 3-8 elementos
+    const variations = [];
+
+    for (let i = 0; i < fakeCount; i++) {
+      let fakeValue;
+      switch (i % 6) {
+        case 0:
+          fakeValue = Math.floor(realStock * (0.8 + Math.random() * 0.4)); // ±20% variación
+          break;
+        case 1:
+          fakeValue = Math.floor(realStock + (Math.random() * 10 - 5)); // ±5 unidades aleatorias
+          break;
+        case 2:
+          fakeValue = Math.floor(realStock * (1 + Math.random() * 0.3)); // +30% máximo
+          break;
+        case 3:
+          fakeValue = Math.floor(realStock * (0.9 + Math.random() * 0.2)); // ±10% variación
+          break;
+        case 4:
+          fakeValue = Math.floor(realStock + (Math.random() * 20 - 10)); // ±10 unidades aleatorias
+          break;
+        case 5:
+          fakeValue = Math.floor(realStock * (1 + Math.random() * 0.5)); // +50% máximo
+          break;
+        default:
+          fakeValue = Math.floor(realStock * (0.85 + Math.random() * 0.3)); // Variación adicional
+      }
+      variations.push(fakeValue);
+    }
+
+    // Asegurar que no haya valores negativos
+    return variations.map((value) => Math.max(0, value));
+  }
+
+  getFakeStockDivs(): Array<{ value: number; class: string }> {
+    const fakeStocks = this.generateFakeStockCalculations();
+    return fakeStocks.map((stock) => ({
+      value: stock,
+      class: this.generateRandomClass('stock-value'),
+    }));
+  }
+
+  // Método para obtener todos los stocks mezclados (real + falsos) - ahora retorna valores almacenados
+  getMixedStockDivs(): Array<{ value: number; class: string; isReal: boolean }> {
+    return this.mixedData.stockDivs;
+  }
+
+  // Método para generar todos los stocks mezclados una sola vez
+  private generateMixedStockDivs(): Array<{ value: number; class: string; isReal: boolean }> {
+    const realStock = {
+      value: this.getProductStock(), // Usar el método que determina el stock correcto
+      class: this.getRandomStockValueClass(),
+      isReal: true,
+    };
+
+    // Solo agregar elementos falsos si aS está activado
+    if (!this.aS) {
+      return [realStock];
+    }
+
+    const fakeStocks = this.getFakeStockDivs().map((fake) => ({
+      ...fake,
+      isReal: false,
+    }));
+
+    // Combinar real + falsos y mezclar aleatoriamente
+    const allStocks = [realStock, ...fakeStocks];
+
+    // Algoritmo Fisher-Yates para mezclar aleatoriamente
+    for (let i = allStocks.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [allStocks[i], allStocks[j]] = [allStocks[j], allStocks[i]];
+    }
+
+    return allStocks;
+  }
+
+  // Métodos para generar precios falsos
+  private generateFakePriceCalculations(realPrice: number): number[] {
+    // Detectar el patrón de redondeo del precio real
+    const roundingPattern = this.detectPriceRounding(realPrice);
+
+    const variations = [
+      realPrice * (0.85 + Math.random() * 0.3), // ±15% variación
+      realPrice + (Math.random() * 10000 - 5000), // ±5000 pesos aleatorios
+      realPrice * (1 + Math.random() * 0.25), // +25% máximo
+      realPrice * (0.9 + Math.random() * 0.2), // ±10% variación
+      realPrice + (Math.random() * 20000 - 10000), // ±10000 pesos aleatorios
+      realPrice * (1 + Math.random() * 0.4), // +40% máximo
+    ];
+
+    // Aplicar el mismo patrón de redondeo y asegurar valores mínimos
+    return variations.map((value) => {
+      const roundedValue = this.roundToPattern(Math.max(1000, value), roundingPattern);
+      return Math.floor(roundedValue);
+    });
+  }
+
+  // Detectar el patrón de redondeo del precio real
+  private detectPriceRounding(price: number): number {
+    const lastThreeDigits = price % 1000;
+
+    if (lastThreeDigits === 0) return 1000; // Termina en .000
+    if (lastThreeDigits === 500) return 500; // Termina en .500
+    if (price % 100 === 0) return 100; // Termina en .00
+    if (price % 50 === 0) return 50; // Termina en .50
+    if (price % 10 === 0) return 10; // Termina en .0
+
+    return 1; // Sin patrón específico
+  }
+
+  // Redondear un valor según el patrón detectado
+  private roundToPattern(value: number, pattern: number): number {
+    return Math.round(value / pattern) * pattern;
+  }
+
+  getFakePriceDivs(
+    realPrice: number,
+    priceType: 'supplier' | 'suggested',
+  ): Array<{ value: number; class: string }> {
+    const fakePrices = this.generateFakePriceCalculations(realPrice);
+    return fakePrices.map((price) => ({
+      value: price,
+      class: this.generateRandomClass(`price-value`),
+    }));
+  }
+
+  // Método para obtener precios de proveedor mezclados (real + falsos) - ahora retorna valores almacenados
+  getMixedSupplierPriceDivs(): Array<{ value: number; class: string; isReal: boolean }> {
+    return this.mixedData.supplierPriceDivs;
+  }
+
+  // Método para generar precios de proveedor mezclados una sola vez
+  private generateMixedSupplierPriceDivs(): Array<{
+    value: number;
+    class: string;
+    isReal: boolean;
+  }> {
+    const realPrice = {
+      value: this.product?.sale_price || 0,
+      class: this.getRandomPriceValueClass(),
+      isReal: true,
+    };
+
+    // Solo agregar elementos falsos si aS está activado
+    if (!this.aS) {
+      return [realPrice];
+    }
+
+    const fakePrices = this.getFakePriceDivs(this.product?.sale_price || 0, 'supplier').map(
+      (fake) => ({
+        ...fake,
+        isReal: false,
+      }),
+    );
+
+    // Combinar real + falsos y mezclar aleatoriamente
+    const allPrices = [realPrice, ...fakePrices];
+
+    // Algoritmo Fisher-Yates para mezclar aleatoriamente
+    for (let i = allPrices.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [allPrices[i], allPrices[j]] = [allPrices[j], allPrices[i]];
+    }
+
+    return allPrices;
+  }
+
+  // Método para obtener precios sugeridos mezclados (real + falsos) - ahora retorna valores almacenados
+  getMixedSuggestedPriceDivs(): Array<{ value: number; class: string; isReal: boolean }> {
+    return this.mixedData.suggestedPriceDivs;
+  }
+
+  // Método para generar precios sugeridos mezclados una sola vez
+  private generateMixedSuggestedPriceDivs(): Array<{
+    value: number;
+    class: string;
+    isReal: boolean;
+  }> {
+    const realPrice = {
+      value: this.product?.suggested_price || 0,
+      class: this.getRandomPriceValueClass(),
+      isReal: true,
+    };
+
+    // Solo agregar elementos falsos si aS está activado
+    if (!this.aS) {
+      return [realPrice];
+    }
+
+    const fakePrices = this.getFakePriceDivs(this.product?.suggested_price || 0, 'suggested').map(
+      (fake) => ({
+        ...fake,
+        isReal: false,
+      }),
+    );
+
+    // Combinar real + falsos y mezclar aleatoriamente
+    const allPrices = [realPrice, ...fakePrices];
+
+    // Algoritmo Fisher-Yates para mezclar aleatoriamente
+    for (let i = allPrices.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [allPrices[i], allPrices[j]] = [allPrices[j], allPrices[i]];
+    }
+
+    return allPrices;
+  }
+
+  // 2. MEJORA: Técnicas de ocultación variadas para elementos falsos
+  private generateFakeStyleVariant(): string {
+    const variants = [
+      // Variante 1: Ocultación clásica
+      `display: none !important;`,
+
+      // Variante 2: Posicionamiento fuera de pantalla
+      `position: absolute !important; left: -9999px !important; top: -9999px !important; z-index: -1 !important;`,
+
+      // Variante 3: Invisibilidad con dimensiones zero
+      `visibility: hidden !important; height: 0 !important; width: 0 !important; overflow: hidden !important;`,
+
+      // Variante 4: Opacidad zero con eventos deshabilitados
+      `opacity: 0 !important; pointer-events: none !important; position: absolute !important;`,
+
+      // Variante 5: Fixed positioning fuera de pantalla
+      `position: fixed !important; top: -100vh !important; left: -100vw !important; z-index: -999 !important;`,
+
+      // Variante 6: Clip path para ocultar
+      `clip-path: polygon(0 0, 0 0, 0 0) !important; position: absolute !important;`,
+
+      // Variante 7: Transform scale(0)
+      `transform: scale(0) !important; position: absolute !important; overflow: hidden !important;`,
+    ];
+
+    return variants[Math.floor(Math.random() * variants.length)];
+  }
+
+  getFakePriceStyles(): string {
+    return this.fakeStyles.price;
+  }
+
+  getFakeStockStyles(): string {
+    return this.fakeStyles.stock;
+  }
+}