tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement tenant branding system and global toast notification service

Browse Source
This commit is contained in:
ncoronel
2026-07-01 11:54:11 -03:00
parent 2764201ca0
commit 0363280ede
17 changed files with 294 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
View File

@@ -24,6 +24,7 @@
<div class="button-grid">
<app-button [disabled]="true">Primary</app-button>
<app-button variant="secondary" [disabled]="true">Secondary</app-button>
<app-button variant="danger" [disabled]="true">Danger</app-button>
<app-button variant="danger-secondary" [disabled]="true">Danger secondary</app-button>
<app-button variant="cancel" [disabled]="true">Cancel</app-button>
@@ -40,6 +41,15 @@
<app-button variant="cancel">E</app-button>
</div>
</div>
<div class="button-group">
<h2>Toasts</h2>
<div class="button-grid">
<app-button (click)="triggerToast('info')">Trigger Info</app-button>
<app-button variant="secondary" (click)="triggerToast('success')">Trigger Success</app-button>
<app-button variant="danger" (click)="triggerToast('danger')">Trigger Danger</app-button>
</div>
</div>
</div>
<hr class="section-divider" />
@@ -237,7 +247,7 @@
<div class="colors-section">
<h3 class="mb-3">Colores de Marca</h3>
<div class="row">
<div class="col-md-4 mb-3">
<div class="col-md-3 mb-3">
<div class="color-swatch-card shadow-sm">
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-primary)'"></div>
<div class="color-swatch-card__body">
@@ -247,7 +257,7 @@
</div>
</div>
<div class="col-md-4 mb-3">
<div class="col-md-3 mb-3">
<div class="color-swatch-card shadow-sm">
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-secondary)'"></div>
<div class="color-swatch-card__body">
@@ -257,7 +267,7 @@
</div>
</div>
<div class="col-md-4 mb-3">
<div class="col-md-3 mb-3">
<div class="color-swatch-card shadow-sm">
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-danger)'"></div>
<div class="color-swatch-card__body">
@@ -266,6 +276,16 @@
</div>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="color-swatch-card shadow-sm">
<div class="color-swatch-card__preview" [style.background-color]="'var(--tenant-success)'"></div>
<div class="color-swatch-card__body">
<span class="color-swatch-card__title">Success</span>
<code class="color-swatch-card__value">{{ tenant()?.success_color || 'Default' }}</code>
</div>
</div>
</div>
</div>
</div>
</div>

2
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts
View File

@@ -13,6 +13,7 @@ const tenant: Tenant = {
primary_color: '#6376F3',
secondary_color: '#A0A0A0',
danger_color: '#FF8888',
success_color: '#198754',
header_footer_bg_color: '#313131',
header_logo: 'https://example.com/header.png',
footer_logo: 'https://example.com/footer.png'
@@ -63,6 +64,7 @@ describe('ReutilizablesTestPageComponent', () => {
expect(element.textContent).toContain(tenant.primary_color);
expect(element.textContent).toContain(tenant.secondary_color);
expect(element.textContent).toContain(tenant.danger_color);
expect(element.textContent).toContain(tenant.success_color);
});
it('renders the paginator demo with the initial page status', async () => {

13
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
View File

@@ -5,6 +5,7 @@ import { PaginatorComponent } from '../../../../shared/components/paginator/pagi
import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
import { TenantService } from '../../../../core/services/tenant.service';
import { ToastService } from '../../../../core/services/toast.service';
@Component({
selector: 'app-reutilizables-test-page',
@@ -14,6 +15,7 @@ import { TenantService } from '../../../../core/services/tenant.service';
})
export class ReutilizablesTestPageComponent {
private readonly tenantService = inject(TenantService);
private readonly toastService = inject(ToastService);
protected readonly tenant = this.tenantService.tenant;
protected textValue = 'Auriculares';
protected numberValue = '24';
@@ -70,5 +72,14 @@ export class ReutilizablesTestPageComponent {
this.fileName = '';
this.clearTrigger += 1;
}
}
protected triggerToast(type: 'success' | 'danger' | 'info'): void {
if (type === 'success') {
this.toastService.success('¡Operación exitosa! El producto se ha guardado correctamente.');
} else if (type === 'danger') {
this.toastService.danger('¡Alerta de error! Hubo un problema al procesar la solicitud.');
} else if (type === 'info') {
this.toastService.info('Información del sistema: Hay una nueva actualización disponible.');
}
}
}