@dropi/ui-components 1.0.0

package/src/components-source/dropi-badge/dropi-badge.component.stories.ts

@@ -0,0 +1,140 @@
+/**
+ * @fileoverview Badge component stories for Storybook
+ * @description Small visual indicator for counts or status
+ */
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { DropiBadgeComponent } from './dropi-badge.component';
+
+const meta: Meta<DropiBadgeComponent> = {
+  title: 'UI Dropi/Badge',
+  component: DropiBadgeComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }),
+  ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A small visual indicator component for displaying counts or status.
+Badges are typically used on icons or buttons to show notifications or quantities.
+
+### Key Features
+- **Counter type**: Display numerical values (notifications, cart items, etc.)
+- **State type**: Show check or pending status indicators
+- **Variants**: primary, secondary, tertiary color schemes
+        `,
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['state', 'counter'],
+      description: 'Type of badge to display',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'counter' },
+        category: 'Appearance',
+      },
+    },
+    state: {
+      control: 'select',
+      options: ['check', 'pending'],
+      description: 'State indicator for state-type badges',
+      table: {
+        type: { summary: 'string' },
+        category: 'State',
+      },
+    },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'tertiary'],
+      description: 'Color variant that determines the badge appearance',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'primary' },
+        category: 'Appearance',
+      },
+    },
+    count: {
+      control: 'number',
+      description: 'Number to display in counter-type badges',
+      table: {
+        type: { summary: 'number' },
+        category: 'Data',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropiBadgeComponent>;
+
+/**
+ * Default counter badge showing a numerical value.
+ */
+export const Default: Story = {
+  args: {
+    type: 'counter',
+    variant: 'primary',
+    count: 10,
+  },
+};
+
+/**
+ * Check state badge for verified or completed status.
+ */
+export const StateCheck: Story = {
+  args: {
+    type: 'state',
+    state: 'check',
+  },
+};
+
+/**
+ * Pending state badge for items awaiting action.
+ */
+export const StatePending: Story = {
+  args: {
+    type: 'state',
+    state: 'pending',
+  },
+};
+
+/**
+ * Primary variant counter badge.
+ */
+export const CounterPrimary: Story = {
+  args: {
+    type: 'counter',
+    variant: 'primary',
+    count: 10,
+  },
+};
+
+/**
+ * Secondary variant counter badge.
+ */
+export const CounterSecondary: Story = {
+  args: {
+    type: 'counter',
+    variant: 'secondary',
+    count: 12,
+  },
+};
+
+/**
+ * Tertiary variant counter badge.
+ */
+export const CounterTertiary: Story = {
+  args: {
+    type: 'counter',
+    variant: 'tertiary',
+    count: 15,
+  },
+};

package/src/components-source/dropi-badge/dropi-badge.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'dropi-badge',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './dropi-badge.component.html',
+  styleUrls: ['./dropi-badge.component.scss']
+})
+export class DropiBadgeComponent {
+  /**
+   * Tipo de badge que se mostrará, puede ser "state" o "counter".
+   * @example "state"
+   * @default "state"
+   */
+  @Input() type: 'state' | 'counter' = 'state';
+
+  /**
+   * Estado en el que se encuentra el badge de tipo "state", puede ser "check" o "pending".
+   * @example "check"
+   * @default "check"
+   */
+  @Input() state: 'check' | 'pending' = 'check';
+
+  /**
+   * Variante del badge, determina los colores del mismo, puede ser "primary", "secondary" o "tertiary".
+   * @example "primary"
+   * @default "primary"
+   */
+  @Input() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';
+
+  /**
+   * Contador a mostrar en el badge de tipo "counter".
+   * @example 10
+   * @default 0
+   */
+  @Input() count: number = 0;
+}

package/src/components-source/dropi-banner-external/dropi-banner-external.component.html

@@ -0,0 +1,67 @@
+<div
+  *ngIf="banner; else notVisible"
+  class="dropi-banner-external"
+  [class.loading]="loading"
+  [ngStyle]="{ background: backgroundColor }"
+>
+  <ng-container *ngIf="!loading; else loadingTpl">
+    <a
+      *ngIf="hasLink"
+      [href]="getActionLink()"
+      target="_blank"
+      rel="noopener"
+      (click)="onClickBanner($event)"
+    >
+      <picture>
+        <source *ngIf="imageUrls.large" media="(min-width: 1280px)" [srcset]="imageUrls.large" />
+        <source *ngIf="imageUrls.medium" media="(min-width: 992px)" [srcset]="imageUrls.medium" />
+        <source *ngIf="imageUrls.tablet" media="(min-width: 768px)" [srcset]="imageUrls.tablet" />
+        <source *ngIf="imageUrls.mobile" media="(max-width: 767px)" [srcset]="imageUrls.mobile" />
+        <img
+          [src]="getImageFallback()"
+          [alt]="banner.title?.rendered || banner.acf.slug"
+          loading="lazy"
+        />
+        <div class="close-search">
+          <app-icon
+            name="Close-small"
+            [width]="20"
+            [height]="20"
+            [color]="'#475066'"
+            (click)="closeBanner()"
+          ></app-icon>
+        </div>
+      </picture>
+    </a>
+    <div *ngIf="!hasLink" class="click-wrapper" (click)="onClickBanner($event)">
+      <picture>
+        <source *ngIf="imageUrls.large" media="(min-width: 1280px)" [srcset]="imageUrls.large" />
+        <source *ngIf="imageUrls.medium" media="(min-width: 992px)" [srcset]="imageUrls.medium" />
+        <source *ngIf="imageUrls.tablet" media="(min-width: 768px)" [srcset]="imageUrls.tablet" />
+        <source *ngIf="imageUrls.mobile" media="(max-width: 767px)" [srcset]="imageUrls.mobile" />
+        <img
+          [src]="getImageFallback()"
+          [alt]="banner.title?.rendered || banner.acf.slug"
+          loading="lazy"
+        />
+        <div class="close-search">
+          <app-icon
+            name="Close-small"
+            [width]="20"
+            [height]="20"
+            [color]="'#475066'"
+            (click)="closeBanner()"
+          ></app-icon>
+        </div>
+      </picture>
+    </div>
+  </ng-container>
+</div>
+
+<ng-template #loadingTpl>
+  <div class="banner-loading"></div>
+</ng-template>
+
+<ng-template #notVisible>
+  <div class="banner-hidden" *ngIf="!loading"></div>
+</ng-template>

package/src/components-source/dropi-banner-external/dropi-banner-external.component.scss

@@ -0,0 +1,46 @@
+.drobi-banner-external,
+.dropi-banner-external {
+  display: block;
+  width: 100%;
+  position: relative;
+  margin-bottom: 16px;
+  border-radius: var(--Border-2, 8px);
+}
+
+.dropi-banner-external picture,
+.dropi-banner-external img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--Border-2, 8px);
+  max-width: 1220px;
+  margin: auto;
+  position: relative;
+}
+
+.click-wrapper {
+  cursor: pointer;
+}
+
+.banner-loading {
+  width: 100%;
+  text-align: center;
+  padding: 16px;
+  font-size: 14px;
+  color: #555;
+}
+
+.banner-hidden {
+  display: none;
+}
+
+.dropi-banner-external.loading {
+  opacity: 0.5;
+}
+
+.close-search {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  cursor: pointer;
+}

package/src/components-source/dropi-banner-external/dropi-banner-external.component.spec.ts

@@ -0,0 +1,170 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiBannerExternalComponent } from './dropi-banner-external.component';
+import { IconComponent } from '../icon/icon.component';
+import { WordpressDropiService } from 'src/app/services/wordpress-dropi.service';
+import { BettaTesterService } from '@app/services/betta-tester.service';
+import { DomSanitizer } from '@angular/platform-browser';
+import { mockDomSanitizer } from '../../../test-utils/jest-mocks';
+import { of, throwError } from 'rxjs';
+import { SimpleChange, SimpleChanges } from '@angular/core';
+
+// Mock WordpressDropiService
+const mockWordpressDropiService = {
+  getBanners: jest.fn().mockReturnValue(of([])),
+  getBannersBySlug: jest.fn().mockReturnValue(of([])),
+};
+
+// Mock BettaTesterService
+const mockBettaTesterService = {
+  viewOnlyCountry: jest.fn().mockReturnValue(true),
+  isDropiBrand: jest.fn().mockReturnValue(true),
+};
+
+describe('DropiBannerExternalComponent', () => {
+  let component: DropiBannerExternalComponent;
+  let fixture: ComponentFixture<DropiBannerExternalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiBannerExternalComponent, IconComponent],
+      providers: [
+        { provide: WordpressDropiService, useValue: mockWordpressDropiService },
+        { provide: BettaTesterService, useValue: mockBettaTesterService },
+        { provide: DomSanitizer, useValue: mockDomSanitizer },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiBannerExternalComponent);
+    component = fixture.componentInstance;
+    
+    // Reset mocks
+    jest.clearAllMocks();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.banners).toEqual([]);
+      expect(component.viewOnWhiteBrand).toBe(false);
+      expect(component.viewOnlyCountries).toEqual([]);
+      expect(component.banner).toBeNull();
+      expect(component.hasLink).toBe(false);
+      expect(component.loading).toBe(false);
+      expect(component.error).toBeNull();
+      expect(component.imageUrls).toEqual({});
+      expect(component.backgroundColor).toBe('transparent');
+    });
+  });
+
+  describe('Propiedad slugName', () => {
+    it('should accept slug name input', () => {
+      component.slugName = 'test-banner';
+      expect(component.slugName).toBe('test-banner');
+    });
+  });
+
+  describe('Propiedad viewOnWhiteBrand', () => {
+    it('should accept true value', () => {
+      component.viewOnWhiteBrand = true;
+      expect(component.viewOnWhiteBrand).toBe(true);
+    });
+
+    it('should accept false value', () => {
+      component.viewOnWhiteBrand = false;
+      expect(component.viewOnWhiteBrand).toBe(false);
+    });
+  });
+
+  describe('Propiedad viewOnlyCountries', () => {
+    it('should accept countries array', () => {
+      const countries = ['Colombia', 'Mexico', 'Chile'];
+      component.viewOnlyCountries = countries;
+      expect(component.viewOnlyCountries).toEqual(countries);
+    });
+
+    it('should accept empty array', () => {
+      component.viewOnlyCountries = [];
+      expect(component.viewOnlyCountries).toEqual([]);
+    });
+  });
+
+  describe('ngOnInit', () => {
+    it('should call loadBanners when slugName is provided', () => {
+      const spy = jest.spyOn(component, 'loadBanners');
+      component.slugName = 'test-slug';
+      component.ngOnInit();
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should not call loadBanners when slugName is not provided', () => {
+      const spy = jest.spyOn(component, 'loadBanners');
+      component.slugName = undefined as any;
+      component.ngOnInit();
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('ngOnChanges', () => {
+    it('should call loadBanners when slugName changes (not first change)', () => {
+      const spy = jest.spyOn(component, 'loadBanners');
+      component.slugName = 'new-slug';
+      
+      const changes: SimpleChanges = {
+        slugName: new SimpleChange('old-slug', 'new-slug', false),
+      };
+      
+      component.ngOnChanges(changes);
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should not call loadBanners on first change', () => {
+      const spy = jest.spyOn(component, 'loadBanners');
+      component.slugName = 'test-slug';
+      
+      const changes: SimpleChanges = {
+        slugName: new SimpleChange(null, 'test-slug', true),
+      };
+      
+      component.ngOnChanges(changes);
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Output bannerClick', () => {
+    it('should emit when banner is clicked', () => {
+      const spy = jest.spyOn(component.bannerClick, 'emit');
+      const bannerData = { id: 1, title: 'Test Banner' };
+      component.bannerClick.emit(bannerData);
+      expect(spy).toHaveBeenCalledWith(bannerData);
+    });
+  });
+
+  describe('Output isVisible', () => {
+    it('should emit true when banner is visible', () => {
+      const spy = jest.spyOn(component.isVisible, 'emit');
+      component.isVisible.emit(true);
+      expect(spy).toHaveBeenCalledWith(true);
+    });
+
+    it('should emit false when banner is not visible', () => {
+      const spy = jest.spyOn(component.isVisible, 'emit');
+      component.isVisible.emit(false);
+      expect(spy).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('loadBanners', () => {
+    it('should set loading to true when called', () => {
+      component.slugName = 'test-slug';
+      mockWordpressDropiService.getBannersBySlug.mockReturnValue(of([]));
+      
+      component.loadBanners();
+      
+      // Note: loading will be set to true then false quickly
+      expect(mockWordpressDropiService.getBannersBySlug).toBeDefined();
+    });
+  });
+});

package/src/components-source/dropi-banner-external/dropi-banner-external.component.stories.ts

@@ -0,0 +1,203 @@
+/**
+ * @fileoverview External Banner component stories for Storybook
+ * @description A dynamic banner component that fetches content from WordPress CMS
+ */
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
+import { of } from 'rxjs';
+import { DropiBannerExternalComponent } from './dropi-banner-external.component';
+import { delay } from 'rxjs/operators';
+
+// Mocks mínimos de servicios usados por el componente
+class MockWordpressDropiService {
+  private baseImg = 'https://via.placeholder.com';
+  private data = [
+    {
+      id: 1,
+      title: { rendered: 'Banner Promo Septiembre' },
+      acf: {
+        slug: 'promo-septiembre',
+        estado: true,
+        background: '#F5F8FF',
+        large: `${this.baseImg}/1280x200?text=Banner+Large`,
+        medium: `${this.baseImg}/1024x200?text=Banner+Medium`,
+        tablet: `${this.baseImg}/820x200?text=Banner+Tablet`,
+        mobile: `${this.baseImg}/390x200?text=Banner+Mobile`,
+        link_de_la_accion: 'https://dropi.co',
+      },
+    },
+    {
+      id: 2,
+      title: { rendered: 'Banner Secundario' },
+      acf: {
+        slug: 'segundo-banner',
+        estado: true,
+        background: '#FFF6E5',
+        large: `${this.baseImg}/1280x200?text=Segundo+Large`,
+        medium: `${this.baseImg}/1024x200?text=Segundo+Medium`,
+        tablet: `${this.baseImg}/820x200?text=Segundo+Tablet`,
+        mobile: `${this.baseImg}/390x200?text=Segundo+Mobile`,
+        link_de_la_accion: null,
+      },
+    },
+  ];
+  getBanners(slug: string) {
+    if (!slug) return of(this.data);
+    return of(this.data.filter((b) => b.acf.slug === slug));
+  }
+  getImageUrl(id: number) {
+    return of(`${this.baseImg}/800x200?text=Image+${id}`);
+  }
+}
+
+class MockWordpressDropiServiceDelayed extends MockWordpressDropiService {
+  override getBanners(slug: string) {
+    return super.getBanners(slug).pipe(delay(1500));
+  }
+}
+
+class MockBettaTesterService {
+  // se puede alternar en args mediante provider override si fuese necesario
+  constructor(
+    private isDropi = true,
+    private currentCountry: string = 'COLOMBIA',
+  ) {}
+  isDropiBrand() {
+    return this.isDropi;
+  }
+  viewOnlyCountry(countries: string[]): boolean {
+    if (!countries || countries.length === 0) return true;
+    const norm = (s: string) => (s || '').toUpperCase().trim();
+    return countries.map(norm).includes(norm(this.currentCountry));
+  }
+}
+
+const meta: Meta<DropiBannerExternalComponent> = {
+  title: 'UI Dropi/External Banner',
+  component: DropiBannerExternalComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: (globalThis as any).WordpressDropiService || 'WordpressDropiService',
+          useClass: MockWordpressDropiService,
+        },
+        {
+          provide: (globalThis as any).BettaTesterService || 'BettaTesterService',
+          useValue: new MockBettaTesterService(true),
+        },
+      ],
+    }),
+  ],
+  argTypes: {
+    slugName: {
+      control: 'select',
+      options: ['promo-septiembre', 'segundo-banner', 'no-existe'],
+      description: 'WordPress slug identifier for the banner',
+    },
+    viewOnWhiteBrand: { control: 'boolean', description: 'Show on white-label brands' },
+    bannerClick: { action: 'bannerClick', description: 'Emitted when clicked without link' },
+    isVisible: { action: 'isVisible', description: 'Emitted when visibility changes' },
+    viewOnlyCountries: {
+      control: 'object',
+      description: 'List of allowed countries. Empty = all countries allowed.',
+    },
+  },
+  args: {
+    slugName: 'promo-septiembre',
+    viewOnWhiteBrand: false,
+    viewOnlyCountries: [],
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export default meta;
+
+type Story = StoryObj<DropiBannerExternalComponent>;
+
+export const SoloDropi: Story = {
+  name: 'Dropi Only (viewOnWhiteBrand = false)',
+  args: {
+    viewOnWhiteBrand: false,
+    slugName: 'promo-septiembre',
+  },
+  parameters: {
+    docs: { description: { story: 'Visible only when isDropiBrand() is true.' } },
+  },
+};
+
+export const TodasLasMarcas: Story = {
+  name: 'All Brands (viewOnWhiteBrand = true)',
+  args: {
+    viewOnWhiteBrand: true,
+    slugName: 'segundo-banner',
+  },
+  parameters: {
+    docs: { description: { story: 'Forces visibility for any brand.' } },
+  },
+};
+
+export const BannerSinLink: Story = {
+  name: 'Banner Without Link (click emits event)',
+  args: {
+    slugName: 'segundo-banner',
+    viewOnWhiteBrand: true,
+  },
+};
+
+export const NoEncontrado: Story = {
+  name: 'Slug Not Found',
+  args: { slugName: 'no-existe', viewOnWhiteBrand: true },
+  parameters: {
+    docs: { description: { story: 'Does not render banner and emits isVisible=false.' } },
+  },
+};
+
+export const Cargando: Story = {
+  name: 'Loading State (simulated delay)',
+  args: { slugName: 'promo-septiembre', viewOnWhiteBrand: true },
+  decorators: [
+    moduleMetadata({
+      providers: [
+        {
+          provide: (globalThis as any).WordpressDropiService || 'WordpressDropiService',
+          useClass: MockWordpressDropiServiceDelayed,
+        },
+        {
+          provide: (globalThis as any).BettaTesterService || 'BettaTesterService',
+          useValue: new MockBettaTesterService(true),
+        },
+      ],
+    }),
+  ],
+  parameters: {
+    docs: { description: { story: 'Shows loading placeholder before resolving images.' } },
+  },
+};
+
+export const RestrictoPaisPermitido: Story = {
+  name: 'Country Restriction (allowed)',
+  args: {
+    slugName: 'promo-septiembre',
+    viewOnWhiteBrand: true,
+    viewOnlyCountries: ['COLOMBIA'],
+  },
+  parameters: {
+    docs: {
+      description: { story: 'Shows because current country (mock COLOMBIA) is in the list.' },
+    },
+  },
+};
+
+export const RestrictoPaisNoPermitido: Story = {
+  name: 'Country Restriction (not allowed)',
+  args: {
+    slugName: 'promo-septiembre',
+    viewOnWhiteBrand: true,
+    viewOnlyCountries: ['MEXICO'],
+  },
+  parameters: {
+    docs: { description: { story: 'Banner will not show; isVisible will emit false.' } },
+  },
+};