feat: implement store layout with header and footer components, update tenant service URL

This commit is contained in:
2026-06-26 14:02:35 -03:00
parent ac9ba12045
commit da01745732
12 changed files with 253 additions and 407 deletions

View File

@@ -0,0 +1,54 @@
<footer class="store-layout__footer mt-auto text-light">
<div class="container-xl px-3 px-md-4 py-4 py-md-5">
<div class="row g-4">
<div class="col-12 col-md-6 col-xl-5 d-grid gap-3 align-content-start">
<div
class="store-layout__brand-slot d-inline-flex align-items-center gap-3"
data-testid="store-footer-brand-slot"
aria-label="Espacio reservado para logo de Sonder"
>
<span class="store-layout__brand-mark store-layout__brand-mark--footer" aria-hidden="true">
S
</span>
<span class="store-layout__brand-text store-layout__brand-text--footer">SONDER</span>
</div>
<div class="d-grid gap-2">
<div class="d-flex align-items-center gap-2 text-light-emphasis">
<i class="fa-solid fa-location-dot" aria-hidden="true"></i>
<span>Av. San Lorenzo 1542, Rosario</span>
</div>
<div class="d-flex align-items-center gap-2 text-light-emphasis">
<i class="fa-solid fa-phone" aria-hidden="true"></i>
<span>54 9 (0341) 6658247</span>
</div>
</div>
<p class="mb-0 small text-white-50">Copyright &copy; {{ currentYear }} - Sonder</p>
</div>
@for (section of footerSections; track section.heading) {
<div class="col-12 col-md-6 col-xl-2 d-grid gap-3 align-content-start">
<h2 class="store-layout__footer-heading">{{ section.heading }}</h2>
<div class="d-grid gap-2">
@for (link of section.links; track link) {
<span class="text-light-emphasis">{{ link }}</span>
}
</div>
</div>
}
<div class="col-12 col-md-6 col-xl-3 d-grid gap-3 align-content-start">
<h2 class="store-layout__footer-heading">Seguinos:</h2>
<div class="d-flex align-items-center gap-3">
@for (social of socialLinks; track social.label) {
<span class="fs-5 text-white">
<i [class]="social.iconClass" aria-hidden="true"></i>
<span class="visually-hidden">{{ social.label }}</span>
</span>
}
</div>
</div>
</div>
</div>
</footer>

View File

@@ -0,0 +1,44 @@
.store-layout__footer {
background-color: #323232;
}
.store-layout__brand-slot {
min-width: 10rem;
}
.store-layout__brand-mark {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border: 1px dashed rgba(255, 255, 255, 0.35);
border-radius: 999px;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #ffffff;
}
.store-layout__brand-text {
font-size: 1.8rem;
font-weight: 700;
letter-spacing: -0.08em;
color: #ffffff;
}
.store-layout__footer-heading {
margin: 0;
font-size: 0.95rem;
font-weight: 500;
color: #f8f8f8;
}
@media (max-width: 767.98px) {
.store-layout__brand-slot {
min-width: 0;
}
.store-layout__brand-text {
font-size: 1.45rem;
}
}

View File

@@ -0,0 +1,23 @@
import { Component, Input } from '@angular/core';
export type StoreFooterSection = {
heading: string;
links: string[];
};
export type StoreSocialLink = {
label: string;
iconClass: string;
};
@Component({
selector: 'app-store-footer',
imports: [],
templateUrl: './store-footer.component.html',
styleUrl: './store-footer.component.scss'
})
export class StoreFooterComponent {
@Input({ required: true }) currentYear = new Date().getFullYear();
@Input({ required: true }) footerSections: StoreFooterSection[] = [];
@Input({ required: true }) socialLinks: StoreSocialLink[] = [];
}

View File

@@ -0,0 +1,55 @@
<header class="store-layout__header bg-white border-bottom">
<div class="border-bottom">
<div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-wrap align-items-center justify-content-between gap-3">
<div
class="store-layout__brand-slot d-inline-flex align-items-center gap-3 flex-shrink-0"
data-testid="store-header-brand-slot"
aria-label="Espacio reservado para logo de Sonder"
>
<span class="store-layout__brand-mark" aria-hidden="true">S</span>
<span class="store-layout__brand-text">SONDER</span>
</div>
<div class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-3 ms-auto w-100 w-lg-auto">
<div class="input-group store-layout__search" role="search">
<label class="visually-hidden" for="store-search-input">Buscar productos</label>
<input
id="store-search-input"
type="search"
class="form-control border-dark border-end-0 rounded-start"
placeholder="Buscar productos"
/>
<button type="button" class="btn btn-outline-dark border-start-0 rounded-end px-3" aria-label="Buscar">
<i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
</button>
</div>
<div class="d-flex align-items-center justify-content-end gap-1" aria-label="Acciones de usuario">
@for (action of headerActions; track action.label) {
<button
type="button"
class="btn btn-link text-dark p-2 text-decoration-none"
[attr.aria-label]="action.label"
[attr.title]="action.label"
>
<i [class]="action.iconClass" aria-hidden="true"></i>
</button>
}
</div>
</div>
</div>
</div>
<div>
<div class="container-xl px-3 px-md-4">
<button
type="button"
class="btn btn-link d-inline-flex align-items-center gap-2 px-0 py-2 text-dark text-uppercase fw-bold text-decoration-none store-layout__category-trigger"
aria-label="Categorias"
>
<span>Categorias</span>
<i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
</button>
</div>
</div>
</header>

View File

@@ -0,0 +1,46 @@
.store-layout__brand-slot {
min-width: 10rem;
}
.store-layout__brand-mark {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border: 1px dashed #bbbbbb;
border-radius: 999px;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #373737;
}
.store-layout__brand-text {
font-size: 1.8rem;
font-weight: 700;
letter-spacing: -0.08em;
}
.store-layout__search {
width: min(100%, 24rem);
min-width: 18rem;
}
.store-layout__category-trigger {
font-size: 0.8rem;
letter-spacing: 0.02em;
}
@media (max-width: 767.98px) {
.store-layout__brand-slot {
min-width: 0;
}
.store-layout__brand-text {
font-size: 1.45rem;
}
.store-layout__search {
min-width: 0;
}
}

View File

@@ -0,0 +1,16 @@
import { Component, Input } from '@angular/core';
export type StoreHeaderAction = {
label: string;
iconClass: string;
};
@Component({
selector: 'app-store-header',
imports: [],
templateUrl: './store-header.component.html',
styleUrl: './store-header.component.scss'
})
export class StoreHeaderComponent {
@Input({ required: true }) headerActions: StoreHeaderAction[] = [];
}

View File

@@ -1,110 +1,13 @@
<div class="store-layout">
<header class="store-layout__header">
<div class="store-layout__top-bar">
<div class="store-layout__container store-layout__top-content">
<div
class="store-layout__brand-slot"
data-testid="store-header-brand-slot"
aria-label="Espacio reservado para logo de Sonder"
>
<span class="store-layout__brand-mark" aria-hidden="true">S</span>
<span class="store-layout__brand-text">SONDER</span>
</div>
<div class="store-layout d-flex flex-column flex-grow-1">
<app-store-header [headerActions]="headerActions" />
<div class="store-layout__tools">
<div class="store-layout__search" role="search">
<label class="visually-hidden" for="store-search-input">Buscar productos</label>
<input
id="store-search-input"
type="search"
class="store-layout__search-input"
placeholder="Buscar productos"
/>
<button type="button" class="store-layout__search-button" aria-label="Buscar">
<i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
</button>
</div>
<div class="store-layout__actions" aria-label="Acciones de usuario">
@for (action of headerActions; track action.label) {
<button
type="button"
class="store-layout__header-action"
[attr.aria-label]="action.label"
[attr.title]="action.label"
>
<i [class]="action.iconClass" aria-hidden="true"></i>
</button>
}
</div>
</div>
</div>
</div>
<div class="store-layout__category-bar">
<div class="store-layout__container">
<button type="button" class="store-layout__category-trigger" aria-label="Categorias">
<span>Categorias</span>
<i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
</button>
</div>
</div>
</header>
<main class="store-layout__main">
<main class="flex-grow-1 d-block">
<router-outlet />
</main>
<footer class="store-layout__footer">
<div class="store-layout__container store-layout__footer-content">
<div class="store-layout__footer-brand-group">
<div
class="store-layout__brand-slot store-layout__brand-slot--footer"
data-testid="store-footer-brand-slot"
aria-label="Espacio reservado para logo de Sonder"
>
<span class="store-layout__brand-mark store-layout__brand-mark--footer" aria-hidden="true">
S
</span>
<span class="store-layout__brand-text store-layout__brand-text--footer">SONDER</span>
</div>
<div class="store-layout__contact-list">
<div class="store-layout__contact-item">
<i class="fa-solid fa-location-dot" aria-hidden="true"></i>
<span>Av. San Lorenzo 1542, Rosario</span>
</div>
<div class="store-layout__contact-item">
<i class="fa-solid fa-phone" aria-hidden="true"></i>
<span>54 9 (0341) 6658247</span>
</div>
</div>
<p class="store-layout__copyright">Copyright &copy; {{ currentYear }} - Sonder</p>
</div>
@for (section of footerSections; track section.heading) {
<div class="store-layout__footer-section">
<h2 class="store-layout__footer-heading">{{ section.heading }}</h2>
<div class="store-layout__footer-links">
@for (link of section.links; track link) {
<span class="store-layout__footer-link">{{ link }}</span>
}
</div>
</div>
}
<div class="store-layout__social-group">
<h2 class="store-layout__footer-heading">Seguinos:</h2>
<div class="store-layout__social-links">
@for (social of socialLinks; track social.label) {
<span class="store-layout__social-link">
<i [class]="social.iconClass" aria-hidden="true"></i>
<span class="visually-hidden">{{ social.label }}</span>
</span>
}
</div>
</div>
</div>
</footer>
<app-store-footer
[currentYear]="currentYear"
[footerSections]="footerSections"
[socialLinks]="socialLinks"
/>
</div>

View File

@@ -4,285 +4,3 @@
background-color: #f6f6f6;
color: #202020;
}
.store-layout {
display: flex;
flex: 1;
flex-direction: column;
}
.store-layout__container {
width: min(100% - 3rem, 75rem);
margin: 0 auto;
}
.store-layout__header {
background-color: #ffffff;
border-bottom: 1px solid #e9e9e9;
}
.store-layout__top-bar {
border-bottom: 1px solid #efefef;
}
.store-layout__top-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 5.5rem;
padding: 1rem 0;
}
.store-layout__brand-slot {
display: inline-flex;
align-items: center;
gap: 0.75rem;
min-width: 10rem;
}
.store-layout__brand-mark {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border: 1px dashed #bbbbbb;
border-radius: 999px;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #373737;
}
.store-layout__brand-text {
font-size: 1.8rem;
font-weight: 700;
letter-spacing: -0.08em;
}
.store-layout__tools {
display: flex;
align-items: center;
gap: 1rem;
margin-left: auto;
}
.store-layout__search {
display: flex;
align-items: center;
width: min(100%, 24rem);
min-width: 18rem;
border: 1px solid #313131;
border-radius: 0.35rem;
background-color: #ffffff;
overflow: hidden;
}
.store-layout__search-input {
flex: 1;
min-width: 0;
padding: 0.7rem 0.85rem;
border: 0;
font-size: 0.95rem;
background: transparent;
&:focus {
outline: none;
}
}
.store-layout__search-button,
.store-layout__header-action,
.store-layout__category-trigger {
border: 0;
background: transparent;
}
.store-layout__search-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
color: #2c2c2c;
}
.store-layout__actions {
display: flex;
align-items: center;
gap: 0.25rem;
}
.store-layout__header-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
font-size: 1rem;
color: #2c2c2c;
}
.store-layout__category-bar {
min-height: 2.35rem;
}
.store-layout__category-trigger {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 2.35rem;
padding: 0;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #202020;
}
.store-layout__main {
flex: 1;
display: block;
}
.store-layout__footer {
margin-top: auto;
background-color: #323232;
color: #f3f3f3;
}
.store-layout__footer-content {
display: grid;
grid-template-columns: minmax(16rem, 1.6fr) repeat(2, minmax(10rem, 1fr)) auto;
gap: 2rem;
padding: 2.5rem 0;
}
.store-layout__footer-brand-group,
.store-layout__footer-section,
.store-layout__social-group {
display: grid;
align-content: start;
gap: 0.9rem;
}
.store-layout__brand-slot--footer {
min-width: 0;
}
.store-layout__brand-mark--footer {
border-color: rgba(255, 255, 255, 0.35);
color: #ffffff;
}
.store-layout__brand-text--footer {
color: #ffffff;
}
.store-layout__contact-list {
display: grid;
gap: 0.45rem;
}
.store-layout__contact-item {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.95rem;
color: #ececec;
}
.store-layout__copyright {
margin: 0;
font-size: 0.85rem;
color: #d3d3d3;
}
.store-layout__footer-heading {
margin: 0;
font-size: 0.95rem;
font-weight: 500;
color: #f8f8f8;
}
.store-layout__footer-links {
display: grid;
gap: 0.55rem;
}
.store-layout__footer-link {
font-size: 0.95rem;
color: #ececec;
}
.store-layout__social-group {
justify-items: start;
}
.store-layout__social-links {
display: flex;
align-items: center;
gap: 0.85rem;
padding-top: 0.1rem;
}
.store-layout__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: #ffffff;
}
@media (max-width: 991.98px) {
.store-layout__top-content {
flex-wrap: wrap;
}
.store-layout__tools {
flex: 1 1 100%;
justify-content: space-between;
}
.store-layout__search {
flex: 1 1 auto;
width: auto;
}
.store-layout__footer-content {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.store-layout__container {
width: min(100% - 1.5rem, 75rem);
}
.store-layout__brand-slot {
min-width: 0;
}
.store-layout__brand-text {
font-size: 1.45rem;
}
.store-layout__tools {
flex-direction: column;
align-items: stretch;
}
.store-layout__search {
min-width: 0;
}
.store-layout__actions {
justify-content: flex-end;
}
.store-layout__footer-content {
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
padding: 2rem 0;
}
}

View File

@@ -17,10 +17,10 @@ describe('StoreLayoutComponent', () => {
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('.store-layout__header')).not.toBeNull();
expect(compiled.querySelector('app-store-header .store-layout__header')).not.toBeNull();
expect(compiled.querySelector('.store-layout__category-trigger')).not.toBeNull();
expect(compiled.querySelector('router-outlet')).not.toBeNull();
expect(compiled.querySelector('.store-layout__footer')).not.toBeNull();
expect(compiled.querySelector('app-store-footer .store-layout__footer')).not.toBeNull();
});
it('renders the placeholder branding and action icons', () => {

View File

@@ -1,24 +1,11 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
type StoreHeaderAction = {
label: string;
iconClass: string;
};
type StoreFooterSection = {
heading: string;
links: string[];
};
type StoreSocialLink = {
label: string;
iconClass: string;
};
import { StoreFooterComponent, StoreFooterSection, StoreSocialLink } from './store-footer/store-footer.component';
import { StoreHeaderComponent, StoreHeaderAction } from './store-header/store-header.component';
@Component({
selector: 'app-store-layout',
imports: [RouterOutlet],
imports: [RouterOutlet, StoreHeaderComponent, StoreFooterComponent],
templateUrl: './store-layout.component.html',
styleUrl: './store-layout.component.scss'
})

View File

@@ -23,7 +23,7 @@ export class TenantService {
const domain = this.resolveDomain();
const response = await firstValueFrom(
this.http.get<TenantBootstrapResponse>(`${environment.url}tennants/bootstrap/${domain}`)
this.http.get<TenantBootstrapResponse>(`${environment.url}tenants/bootstrap/${domain}`)
);
if (!response?.data) {

View File

@@ -1,6 +1,6 @@
export const environment = {
production: false,
nombre:"Desarrollo - activo",
url:"url/api/",
url:"http://localhost:8000/api/",
urlDescarga:"url/"
};