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

Merge branch 'feature/responsive' into develop

Browse Source
This commit is contained in:
ncoronel
2026-08-06 09:23:37 -03:00
parent 78970573a8 50f986dd2f
commit 8d88e1bb13
71 changed files with 1471 additions and 706 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/shared/components/button/button.component.scss
View File

@@ -1,8 +1,4 @@
:host {
display: inline-block;
}
:host(.product-detail__cta) {
display: block;
width: 100%;
}
@@ -11,10 +7,6 @@
min-height: 40px;
font-weight: 700;
font-size: 15px;
min-width: 216px;
}
:host(.product-detail__cta) .btn {
width: 100%;
}

10
src/app/shared/components/cart/cart.component.scss
View File

@@ -87,3 +87,13 @@
display: flex;
gap: 12px;
}
@media (max-width: 767.98px) {
.cart-actions {
flex-direction: column;
::ng-deep app-button {
width: 100%;
}
}
}

34
src/app/shared/components/hero-banner/hero-banner.component.html
View File

@@ -1,14 +1,13 @@
<div [class.hero-banner-container]="heroConfig">
<div class="hero-banner-container">
<div
[class.hero-banner]="heroConfig"
[class.position-relative]="heroConfig"
[class.rounded]="heroConfig"
[ngStyle]="{
'background-image': heroConfig?.background_image_id
? 'url(' + heroConfig.background_image_id + ')'
: 'none',
}"
class="hero-banner position-relative rounded"
>
<div
class="hero-media"
aria-hidden="true"
[ngStyle]="{'background-image': heroConfig?.background_image ? 'url(' + heroConfig.background_image + ')' : 'none'}"
></div>
@if (heroConfig) {
<div
class="hero-content d-flex justify-content-end p-4 p-md-5 w-100 h-100 align-items-center"
@@ -21,10 +20,7 @@
<div class="hero-description" [innerHTML]="heroConfig.description_html"></div>
}
@if (heroConfig.button_text) {
<a
[href]="heroConfig.button_href || '#'"
class="text-decoration-none mt-3 d-inline-block"
>
<a [href]="heroConfig.button_href || '#'" class="hero-action text-decoration-none mt-3 d-inline-block">
<app-button variant="primary">
{{ heroConfig.button_text }}
</app-button>
@@ -35,11 +31,8 @@
}
@if (eventConfig) {
<div
class="event-card-container w-100 d-flex justify-content-center"
[class.position-absolute]="heroConfig"
>
<div class="event-card bg-white shadow rounded p-3 p-md-4 text-center">
<div class="event-card-container position-absolute w-100 d-flex justify-content-center">
<div id="event-details" class="event-card bg-white shadow rounded p-3 p-md-4 text-center">
@if (eventConfig.title) {
<h3 class="event-title text-primary fw-bold mb-3">{{ eventConfig.title }}</h3>
}
@@ -60,6 +53,11 @@
</div>
}
</div>
<div class="event-schedule-label" aria-hidden="true">
<i class="fa-solid fa-chevron-down"></i>
<span>Ver horarios</span>
</div>
</div>
</div>
}

163
src/app/shared/components/hero-banner/hero-banner.component.scss
View File

@@ -5,22 +5,25 @@
.hero-banner {
background-color: #e9ecef;
background-size: cover;
background-position: center;
min-height: 400px;
display: flex;
flex-direction: column;
}
&::before {
.hero-media {
position: absolute;
inset: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: inherit;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
inset: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.95) 100%);
border-radius: inherit;
z-index: 1;
}
}
@@ -85,27 +88,147 @@
font-weight: 500;
}
@media (max-width: 768px) {
.hero-banner::before {
background: none;
.event-schedule-label {
display: none;
}
@media (max-width: 767.98px) {
.hero-banner-container {
padding-bottom: 0;
margin-bottom: 0;
}
.hero-banner {
min-height: 0;
overflow: hidden;
background-color: #f5f5f5;
}
.hero-media {
position: relative;
inset: auto;
flex: 0 0 auto;
width: 100%;
height: clamp(8.75rem, 44vw, 10.5rem);
background-position: center center;
background-size: 140% auto;
border-radius: 0;
}
.hero-media::after {
top: auto;
height: 48%;
background: linear-gradient(
to bottom,
rgba(245, 245, 245, 0) 0%,
rgba(245, 245, 245, 0.78) 55%,
#f5f5f5 100%
);
border-radius: 0;
}
.hero-content {
justify-content: center !important;
background: none;
height: auto !important;
min-height: 8.25rem;
margin-top: -1.7rem;
padding: 0 1.25rem 1.75rem !important;
align-items: flex-start !important;
}
.hero-text-box {
width: 100%;
max-width: 19rem;
padding: 0;
text-align: center;
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
background: transparent;
border-radius: 0;
}
::ng-deep .hero-title,
.hero-title {
margin-bottom: 0.4rem;
font-size: 0.875rem;
line-height: 1.2;
}
::ng-deep .hero-title p,
::ng-deep .hero-description p {
margin-bottom: 0;
}
::ng-deep .hero-description,
.hero-description {
font-size: 0.75rem;
line-height: 1.25;
}
.hero-action {
margin-top: 1rem !important;
}
.hero-action ::ng-deep .btn {
min-height: 1.875rem;
padding: 0.4rem 1.35rem;
border-radius: 0.25rem;
font-size: 0.625rem;
}
.event-card-container {
bottom: -80px;
position: relative !important;
bottom: auto;
left: auto;
padding: 0 1.25rem 1.2rem;
}
.hero-banner-container {
padding-bottom: 6rem;
.event-card {
width: 100%;
max-width: 22rem;
min-height: 11.4rem;
padding: 1.75rem 1rem 0.8rem !important;
border-radius: 0 !important;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.04) !important;
}
.event-title {
max-width: 16rem;
margin: 0 auto 0.85rem !important;
font-size: 1rem;
line-height: 1.1;
letter-spacing: 0;
}
.event-details {
gap: 0.45rem !important;
font-size: 0.7rem;
line-height: 1.25;
}
.event-details > div {
gap: 0.5rem !important;
}
.event-icon {
width: 0.9rem;
font-size: 0.85rem;
}
.event-info-text {
font-weight: 400;
}
.event-schedule-label {
display: flex;
justify-content: center;
align-items: center;
gap: 0.55rem;
margin-top: 1.9rem;
color: var(--tenant-primary, #009d4f);
font-size: 0.625rem;
font-weight: 700;
}
.event-schedule-label i {
font-size: 0.65rem;
}
}

3
src/app/shared/components/icon-button/icon-button.component.scss
View File

@@ -69,7 +69,8 @@
color: var(--tenant-danger);
}
.icon-btn--user {
.icon-btn--user,
.icon-btn--bars {
i {
width: 23px;
height: 23px;

4
src/app/shared/components/icon-button/icon-button.component.ts
View File

@@ -10,7 +10,8 @@ export type IconButtonVariant =
| 'angle-down'
| 'copy'
| 'download'
| 'share';
| 'share'
| 'bars';
@Component({
selector: 'app-icon-button',
@@ -38,6 +39,7 @@ export class IconButtonComponent {
copy: 'fa-solid fa-copy',
download: 'fa-solid fa-download',
share: 'fa-solid fa-share-nodes',
bars: 'fa-solid fa-bars',
};
return classes[this.variant()];
});

6
src/app/shared/components/product-column-with-image/product-column-with-image.component.scss
View File

@@ -75,3 +75,9 @@
}
}
}
@media (max-width: 767.98px) {
.product-column-with-image {
border-color: var(--color-primary, var(--tenant-primary, #009933));
}
}

1
src/app/shared/components/product-list/product-list.component.html
View File

@@ -22,6 +22,7 @@
[title]="item.nombre"
[description]="item.descripcion ?? ''"
[price]="price(item)"
[variants]="item.variants ?? []"
(buy)="emitColumnBuy(item, $event)"
(addToCart)="emitColumnCart(item, $event)"
/>

25
src/app/shared/components/product-list/product-list.component.spec.ts
View File

@@ -160,6 +160,31 @@ describe('ProductListComponent', () => {
});
});
it('passes column variants through to the purchase event', async () => {
const itemWithVariants: ProductListItem = {
...items[0],
variants: [
{ id: 91, stock_tecnico: 3, values: { fecha: '10 de octubre' } },
{ id: 92, stock_tecnico: 4, values: { fecha: '11 de octubre' } },
],
};
const fixture = await render('column_with_cart', [itemWithVariants]);
const buySpy = vi.fn();
fixture.componentInstance.buy.subscribe(buySpy);
const card = fixture.nativeElement.querySelector(
'app-product-vertical-with-cart-card',
) as HTMLElement;
(card.querySelector('.btn-primary') as HTMLButtonElement).click();
expect(buySpy).toHaveBeenCalledWith({
product: itemWithVariants,
quantity: 1,
variant: 91,
directPurchase: true,
});
});
it('renders pagination and emits the requested page', async () => {
const fixture = await render('row');
const pageChangeSpy = vi.fn();

19
src/app/shared/components/product-list/product-list.component.ts
View File

@@ -123,8 +123,11 @@ export class ProductListComponent {
});
}
protected emitColumnCart(product: ProductListItem, event: { quantity: number }): void {
this.addToCart.emit({ product, quantity: event.quantity });
protected emitColumnCart(
product: ProductListItem,
event: { quantity: number; variant: number | null },
): void {
this.addToCart.emit({ product, quantity: event.quantity, variant: event.variant });
}
protected emitRowBuy(
@@ -139,8 +142,16 @@ export class ProductListComponent {
});
}
protected emitColumnBuy(product: ProductListItem, event: { quantity: number }): void {
this.buy.emit({ product, quantity: event.quantity, variant: null, directPurchase: true });
protected emitColumnBuy(
product: ProductListItem,
event: { quantity: number; variant: number | null },
): void {
this.buy.emit({
product,
quantity: event.quantity,
variant: event.variant,
directPurchase: true,
});
}
protected emitProductDetailBuy(product: ProductListItem): void {

69
src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.html
View File

@@ -8,14 +8,71 @@
</div>
<div class="product-vertical-with-cart-card__purchase">
<div class="product-vertical-with-cart-card__summary">
<span class="product-vertical-with-cart-card__price">{{ formattedPrice() }}</span>
<app-quantity-selector [(quantity)]="quantity" />
</div>
@if (!hasVariants()) {
<div class="product-vertical-with-cart-card__summary">
<span class="product-vertical-with-cart-card__price">{{ formattedPrice() }}</span>
<app-quantity-selector [(quantity)]="quantity" />
</div>
} @else if (!hasMultipleVariantSelectors()) {
<div class="product-vertical-with-cart-card__single-variant">
<span class="product-vertical-with-cart-card__price">{{ formattedPrice() }}</span>
<div class="product-vertical-with-cart-card__single-variant-row">
@for (selector of variantSelectors(); track selector.key) {
<select
class="form-select product-vertical-with-cart-card__variant-select"
[attr.aria-label]="selector.label"
[ngModel]="selectedValues()[selector.key]"
(ngModelChange)="onVariantValueChange(selector.key, $event)"
>
@for (option of selector.options; track option) {
<option [ngValue]="option">{{ option }}</option>
}
</select>
}
<app-quantity-selector [(quantity)]="quantity" />
</div>
</div>
} @else {
<div class="product-vertical-with-cart-card__multiple-variants">
<div class="product-vertical-with-cart-card__summary-column">
<span class="product-vertical-with-cart-card__price">{{ formattedPrice() }}</span>
<app-quantity-selector [(quantity)]="quantity" />
</div>
<div class="product-vertical-with-cart-card__variant-selectors">
@for (selector of variantSelectors(); track selector.key) {
<select
class="form-select product-vertical-with-cart-card__variant-select"
[attr.aria-label]="selector.label"
[ngModel]="selectedValues()[selector.key]"
(ngModelChange)="onVariantValueChange(selector.key, $event)"
>
@for (option of selector.options; track option) {
<option [ngValue]="option">{{ option }}</option>
}
</select>
}
</div>
</div>
}
<div class="product-vertical-with-cart-card__actions">
<app-button variant="primary" (click)="onBuy()">Comprar</app-button>
<app-button variant="secondary" (click)="onAddToCart()"> Agregar al carrito </app-button>
<app-button
variant="primary"
[disabled]="hasVariants() && selectedVariant() === null"
(click)="onBuy()"
>
Comprar
</app-button>
<app-button
variant="secondary"
[disabled]="hasVariants() && selectedVariant() === null"
(click)="onAddToCart()"
>
Agregar al carrito
</app-button>
</div>
</div>
</article>

66
src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.scss
View File

@@ -40,7 +40,7 @@
}
&__description {
margin: 23px 0 ;
margin: 23px 0;
color: #6f6f6f;
font-size: 11px;
font-weight: 300;
@@ -55,11 +55,66 @@
&__summary {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: center;
gap: 16px;
padding-inline: 12px;
}
&__single-variant {
display: grid;
justify-items: center;
gap: 16px;
}
&__single-variant-row {
display: flex;
align-items: center;
width: 100%;
gap: 8px;
}
&__multiple-variants {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: 16px;
}
&__summary-column,
&__variant-selectors {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
min-width: 0;
}
&__variant-selectors {
align-items: stretch;
}
&__variant-select {
min-width: 0;
height: 40px;
border-color: #d8d8d8;
color: #6f6f6f;
font-size: 12px;
&:focus {
border-color: var(--tenant-primary, #009933);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, transparent 75%, var(--tenant-primary, #009933));
}
}
&__single-variant-row &__variant-select {
flex: 1 1 auto;
}
&__single-variant-row app-quantity-selector {
flex: 0 0 auto;
}
&__price {
color: var(--tenant-primary, #009933);
font-size: 22px;
@@ -87,6 +142,12 @@
}
}
@media (max-width: 767.98px) {
.product-vertical-with-cart-card {
border-color: var(--color-primary, var(--tenant-primary, #009933));
}
}
@media (max-width: 420px) {
.product-vertical-with-cart-card {
padding: 42px 20px 21px;
@@ -98,6 +159,5 @@
&__summary {
padding-inline: 12px;
}
}
}

66
src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.spec.ts
View File

@@ -83,7 +83,7 @@ describe('ProductVerticalWithCartCardComponent', () => {
) as HTMLButtonElement;
button.click();
expect(buySpy).toHaveBeenCalledWith({ quantity: 1 });
expect(buySpy).toHaveBeenCalledWith({ quantity: 1, variant: null });
});
it('emits addToCart with the current quantity', async () => {
@@ -98,7 +98,7 @@ describe('ProductVerticalWithCartCardComponent', () => {
) as HTMLButtonElement;
button.click();
expect(addToCartSpy).toHaveBeenCalledWith({ quantity: 3 });
expect(addToCartSpy).toHaveBeenCalledWith({ quantity: 3, variant: null });
});
it('uses the shared primary and secondary buttons', async () => {
@@ -115,4 +115,66 @@ describe('ProductVerticalWithCartCardComponent', () => {
element.querySelector('.product-vertical-with-cart-card__actions .btn-outline-primary'),
).not.toBeNull();
});
it('places a single variant selector in the same row as the quantity', async () => {
const fixture = await createComponent();
fixture.componentRef.setInput('variants', [
{ id: 10, values: { fecha: '10 de octubre' } },
{ id: 11, values: { fecha: '11 de octubre' } },
]);
fixture.detectChanges();
const element = fixture.nativeElement as HTMLElement;
const row = element.querySelector('.product-vertical-with-cart-card__single-variant-row');
expect(row?.querySelectorAll('.product-vertical-with-cart-card__variant-select')).toHaveLength(
1,
);
expect(row?.querySelector('app-quantity-selector')).not.toBeNull();
expect(element.querySelector('.product-vertical-with-cart-card__multiple-variants')).toBeNull();
});
it('uses separate summary and selector columns for multiple variant attributes', async () => {
const fixture = await createComponent();
fixture.componentRef.setInput('variants', [
{ id: 20, values: { fecha: '10 de octubre', turno: 'Mañana' } },
{ id: 21, values: { fecha: '10 de octubre', turno: 'Tarde' } },
]);
fixture.detectChanges();
const element = fixture.nativeElement as HTMLElement;
const layout = element.querySelector('.product-vertical-with-cart-card__multiple-variants');
expect(
layout?.querySelector('.product-vertical-with-cart-card__summary-column'),
).not.toBeNull();
expect(
layout?.querySelectorAll('.product-vertical-with-cart-card__variant-select'),
).toHaveLength(2);
});
it('emits the selected variant with the purchase action', async () => {
const fixture = await createComponent();
fixture.componentRef.setInput('variants', [
{ id: 30, values: { fecha: '10 de octubre' } },
{ id: 31, values: { fecha: '11 de octubre' } },
]);
fixture.detectChanges();
const buySpy = vi.fn();
fixture.componentInstance.buy.subscribe(buySpy);
const select = fixture.nativeElement.querySelector(
'.product-vertical-with-cart-card__variant-select',
) as HTMLSelectElement;
select.value = select.options[1].value;
select.dispatchEvent(new Event('change'));
fixture.detectChanges();
const button = fixture.nativeElement.querySelector(
'.product-vertical-with-cart-card__actions .btn-primary',
) as HTMLButtonElement;
button.click();
expect(buySpy).toHaveBeenCalledWith({ quantity: 1, variant: 31 });
});
});

94
src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.ts
View File

@@ -1,11 +1,33 @@
import { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';
import {
ChangeDetectionStrategy,
Component,
computed,
effect,
input,
model,
output,
signal,
untracked,
} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ButtonComponent } from '../button/button.component';
import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
export interface VerticalCartVariant {
id: number;
values: Record<string, string>;
}
interface VariantSelector {
key: string;
label: string;
options: string[];
}
@Component({
selector: 'app-product-vertical-with-cart-card',
imports: [ButtonComponent, QuantitySelectorComponent],
imports: [ButtonComponent, FormsModule, QuantitySelectorComponent],
templateUrl: './product-vertical-with-cart-card.component.html',
styleUrl: './product-vertical-with-cart-card.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -14,20 +36,80 @@ export class ProductVerticalWithCartCardComponent {
readonly title = input<string>('');
readonly description = input<string>('');
readonly price = input<number>(0);
readonly variants = input<VerticalCartVariant[]>([]);
readonly quantity = model<number>(1);
readonly selectedVariant = model<number | null>(null);
readonly buy = output<{ quantity: number }>();
readonly addToCart = output<{ quantity: number }>();
readonly buy = output<{ quantity: number; variant: number | null }>();
readonly addToCart = output<{ quantity: number; variant: number | null }>();
protected readonly selectedValues = signal<Record<string, string>>({});
protected readonly formattedPrice = computed(() => this.formatCurrency(this.price()));
protected readonly variantSelectors = computed<VariantSelector[]>(() => {
const variants = this.variants();
const keys = Array.from(new Set(variants.flatMap((variant) => Object.keys(variant.values))));
return keys.map((key) => ({
key,
label: this.formatVariantLabel(key),
options: Array.from(
new Set(
variants
.map((variant) => variant.values[key])
.filter((value): value is string => Boolean(value)),
),
),
}));
});
protected readonly hasVariants = computed(() => this.variantSelectors().length > 0);
protected readonly hasMultipleVariantSelectors = computed(
() => this.variantSelectors().length > 1,
);
constructor() {
effect(() => {
const variants = this.variants();
untracked(() => {
if (variants.length === 0) {
this.selectedValues.set({});
this.selectedVariant.set(null);
return;
}
const selected =
variants.find((variant) => variant.id === this.selectedVariant()) ?? variants[0];
this.selectedValues.set({ ...selected.values });
this.selectedVariant.set(selected.id);
});
});
}
protected onVariantValueChange(key: string, value: string): void {
const values = { ...this.selectedValues(), [key]: value };
const selectors = this.variantSelectors();
const matchingVariant = this.variants().find((variant) =>
selectors.every((selector) => variant.values[selector.key] === values[selector.key]),
);
this.selectedValues.set(values);
this.selectedVariant.set(matchingVariant?.id ?? null);
}
protected onAddToCart(): void {
this.addToCart.emit({ quantity: this.quantity() });
this.addToCart.emit({ quantity: this.quantity(), variant: this.selectedVariant() });
}
protected onBuy(): void {
this.buy.emit({ quantity: this.quantity() });
this.buy.emit({ quantity: this.quantity(), variant: this.selectedVariant() });
}
private formatVariantLabel(key: string): string {
const label = key.replace(/[_-]+/g, ' ');
return label.charAt(0).toUpperCase() + label.slice(1);
}
private formatCurrency(value: number): string {

2
src/app/shared/components/store-section/store-section.component.scss
View File

@@ -8,5 +8,5 @@
font-size: 15px;
font-weight: 700;
letter-spacing: 0.08em;
color: #000000;
color: var(--color-primary);
}