Compare commits
3 Commits
develop
...
homologaci
| Author | SHA1 | Date | |
|---|---|---|---|
| 8aea54959f | |||
| 12ca45bdd8 | |||
| fa6fc53f8d |
@@ -29,7 +29,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mb-0 small store-layout__muted-text">Copyright © {{ currentYear }} - Sonder</p>
|
||||
<p class="mb-0 small store-layout__muted-text">Copyright © {{ currentYear }} - {{ storeName || 'Sonder' }}</p>
|
||||
</div>
|
||||
|
||||
@for (section of footerSections; track section.heading) {
|
||||
|
||||
@@ -25,5 +25,6 @@ export class StoreFooterComponent {
|
||||
@Input({ required: true }) footerSections: StoreFooterSection[] = [];
|
||||
@Input({ required: true }) socialMedia: SocialMedia[] = [];
|
||||
@Input() logoUrl: string | null = null;
|
||||
@Input() storeName: string | null = null;
|
||||
readonly logoutClick = output<void>();
|
||||
}
|
||||
|
||||
@@ -61,6 +61,7 @@
|
||||
[footerSections]="footerSections()"
|
||||
[socialMedia]="tenant()?.social_media ?? []"
|
||||
[logoUrl]="tenant()?.footer_logo ?? null"
|
||||
[storeName]="tenant()?.nombre ?? null"
|
||||
(logoutClick)="onLogoutClick()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
import { ApiPaginatedResponse } from '../api-paginated-response.interface';
|
||||
|
||||
export type CatalogItemType = 'product' | 'bundle';
|
||||
|
||||
export interface Product {
|
||||
id: number;
|
||||
type: CatalogItemType;
|
||||
category_id: number;
|
||||
brand_id: number | null;
|
||||
slug: string;
|
||||
@@ -38,7 +35,6 @@ export type InventoryPolicy = 'tracked' | 'unlimited';
|
||||
|
||||
export interface CatalogItemVariant {
|
||||
id: number;
|
||||
event_date_id?: number | null;
|
||||
stock_tecnico: number | null;
|
||||
minimum_use_date?: string | null;
|
||||
maximum_use_date?: string | null;
|
||||
@@ -47,24 +43,12 @@ export interface CatalogItemVariant {
|
||||
values: Record<string, string>;
|
||||
}
|
||||
|
||||
export interface CatalogItemEventDate {
|
||||
id: number;
|
||||
variant_id: number;
|
||||
date: string;
|
||||
starts_at: string;
|
||||
ends_at: string;
|
||||
label: string;
|
||||
stock_tecnico: number | null;
|
||||
}
|
||||
|
||||
export interface SelectedCatalogItemVariant extends CatalogItemVariant {
|
||||
images: string[];
|
||||
}
|
||||
|
||||
export interface CatalogItemDetail {
|
||||
id: number;
|
||||
type: CatalogItemType;
|
||||
purpose?: 'product' | 'entry';
|
||||
category_id: number | null;
|
||||
brand_id: number | null;
|
||||
slug: string;
|
||||
@@ -79,7 +63,6 @@ export interface CatalogItemDetail {
|
||||
maximum_use_date: string | null;
|
||||
attributes: ProductAttribute[];
|
||||
variants: CatalogItemVariant[];
|
||||
event_dates?: CatalogItemEventDate[];
|
||||
selected_variant?: SelectedCatalogItemVariant;
|
||||
stock_tecnico?: number | null;
|
||||
images?: string[];
|
||||
@@ -96,7 +79,6 @@ export interface CatalogFeaturedItemVariant {
|
||||
|
||||
export interface CatalogFeaturedItem {
|
||||
id: number;
|
||||
type: CatalogItemType;
|
||||
nombre: string;
|
||||
descripcion?: string | null;
|
||||
precio: number | string;
|
||||
|
||||
@@ -29,7 +29,6 @@ export interface PurchaseStatusResponse {
|
||||
|
||||
export interface PurchaseSummaryResponse extends PurchaseStatusResponse {
|
||||
id: number;
|
||||
event_id: number | null;
|
||||
created_at: string | null;
|
||||
total: string;
|
||||
}
|
||||
@@ -59,11 +58,9 @@ export interface PurchaseDetailResponse extends PurchaseStatusResponse {
|
||||
id: number;
|
||||
cart_id: number | null;
|
||||
tenant_codigo: string;
|
||||
event_id: number | null;
|
||||
user_id: number;
|
||||
created_at: string | null;
|
||||
payment_method: string | null;
|
||||
expires_at: string | null;
|
||||
dni: string | null;
|
||||
transfer_payer_dni: string | null;
|
||||
telefono: string | null;
|
||||
|
||||
@@ -9,63 +9,18 @@ export interface BankAccount {
|
||||
cvu: string;
|
||||
}
|
||||
|
||||
export interface WebsiteType {
|
||||
codigo: string;
|
||||
nombre: string;
|
||||
primary_color: string | null;
|
||||
secondary_color: string | null;
|
||||
danger_color: string | null;
|
||||
success_color: string | null;
|
||||
site_logo: string | null;
|
||||
}
|
||||
|
||||
export interface HeroConfig {
|
||||
background_image_id?: string | null;
|
||||
background_image?: string | null;
|
||||
title_html?: string | null;
|
||||
description_html?: string | null;
|
||||
button_text?: string | null;
|
||||
button_href?: string | null;
|
||||
}
|
||||
|
||||
export interface AdditionalInfoConfig {
|
||||
description?: string | null;
|
||||
}
|
||||
|
||||
export interface EventDate {
|
||||
id?: number;
|
||||
date: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
}
|
||||
|
||||
export interface EventConfig {
|
||||
id?: number;
|
||||
title?: string | null;
|
||||
location?: string | null;
|
||||
dates_text?: string | null;
|
||||
dates?: EventDate[] | null;
|
||||
contact?: SocialMedia[];
|
||||
}
|
||||
|
||||
export interface ActiveEventDate {
|
||||
id: number;
|
||||
date: string;
|
||||
time_start: string;
|
||||
time_end: string;
|
||||
}
|
||||
|
||||
export interface ActiveEvent {
|
||||
id: number;
|
||||
name: string;
|
||||
address: string;
|
||||
dates: ActiveEventDate[];
|
||||
}
|
||||
|
||||
export interface WebsiteExtras {
|
||||
carousel?: string[];
|
||||
heroConfig?: HeroConfig | null;
|
||||
additionalInfoConfig?: AdditionalInfoConfig | null;
|
||||
[extraName: string]: unknown;
|
||||
dates?: string[] | null;
|
||||
}
|
||||
|
||||
export interface Menu {
|
||||
@@ -105,16 +60,14 @@ export interface Tenant {
|
||||
footer_bg_color: string;
|
||||
header_logo: string;
|
||||
footer_logo: string;
|
||||
website_type_code?: string | null;
|
||||
website_type?: WebsiteType | null;
|
||||
extras?: WebsiteExtras;
|
||||
active_event_id?: number | null;
|
||||
active_event?: ActiveEvent | null;
|
||||
selected_bank_account_id?: number | null;
|
||||
selected_bank_account?: BankAccount | null;
|
||||
hero_config?: HeroConfig | null;
|
||||
event_config?: EventConfig | null;
|
||||
search_product_layout?: 'row' | 'column_with_image' | 'column_with_cart';
|
||||
search_group_layout?: 'paginated' | 'simple' | 'simple_vertical' | 'carousel';
|
||||
search_items_per_page?: number;
|
||||
main_carousel_images?: string[];
|
||||
social_media?: SocialMedia[];
|
||||
menues?: Menu[];
|
||||
categories: Category[];
|
||||
|
||||
@@ -60,7 +60,7 @@ describe('CheckoutPageComponent payment validation', () => {
|
||||
qr_data: { qr_code: 'qr-value' },
|
||||
}),
|
||||
getPurchase: vi.fn().mockResolvedValue({ status: 'pending_payment' }),
|
||||
submitPurchaseForReview: vi.fn().mockResolvedValue({ status: 'pending_payment' }),
|
||||
submitPurchaseForReview: vi.fn().mockResolvedValue({ status: 'in_review' }),
|
||||
withCustomLoading: vi.fn(),
|
||||
};
|
||||
checkoutServiceStub.withCustomLoading.mockReturnValue(checkoutServiceStub);
|
||||
@@ -199,20 +199,20 @@ describe('CheckoutPageComponent payment validation', () => {
|
||||
component.selectedPaymentMethod.set('transfer');
|
||||
|
||||
await component.onComplete();
|
||||
expect(checkoutServiceStub.submitPurchaseForReview).toHaveBeenCalledTimes(1);
|
||||
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(1);
|
||||
expect(component.transferValidationStatus()).toBe('pending');
|
||||
expect(cartServiceStub.clearCart).not.toHaveBeenCalled();
|
||||
expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25]);
|
||||
|
||||
await vi.advanceTimersByTimeAsync(30_000);
|
||||
expect(checkoutServiceStub.submitPurchaseForReview).toHaveBeenCalledTimes(1);
|
||||
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(1);
|
||||
|
||||
await component.onComplete();
|
||||
expect(checkoutServiceStub.submitPurchaseForReview).toHaveBeenCalledTimes(1);
|
||||
expect(checkoutServiceStub.getPurchase).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('navigates after a transfer is confirmed as paid', async () => {
|
||||
checkoutServiceStub.submitPurchaseForReview.mockResolvedValue({ status: 'paid' });
|
||||
checkoutServiceStub.getPurchase.mockResolvedValue({ status: 'paid' });
|
||||
const { component } = createComponent();
|
||||
component.selectedPaymentMethod.set('transfer');
|
||||
|
||||
@@ -375,7 +375,7 @@ describe('CheckoutPageComponent payment validation', () => {
|
||||
expect(component.qrPaymentStatus()).toBe('waiting');
|
||||
});
|
||||
|
||||
it.each(['paid', 'cancelled', 'rejected', 'expired'])(
|
||||
it.each(['in_review', 'paid', 'cancelled', 'rejected', 'expired'])(
|
||||
'redirects a %s purchase to its status page',
|
||||
async (status) => {
|
||||
routeQueryParamMap = convertToParamMap({ purchase: 25 });
|
||||
@@ -395,25 +395,6 @@ describe('CheckoutPageComponent payment validation', () => {
|
||||
},
|
||||
);
|
||||
|
||||
it('redirects a submitted pending payment purchase to its status page', async () => {
|
||||
routeQueryParamMap = convertToParamMap({ purchase: 25 });
|
||||
checkoutServiceStub.getPurchase.mockResolvedValue({
|
||||
id: 25,
|
||||
status: 'pending_payment',
|
||||
payment_method: 'transfer',
|
||||
expires_at: null,
|
||||
transfer_payer_dni: null,
|
||||
items: [],
|
||||
subtotal: '100.00',
|
||||
total: '100.00',
|
||||
});
|
||||
|
||||
createComponent();
|
||||
await Promise.resolve();
|
||||
|
||||
expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25]);
|
||||
});
|
||||
|
||||
it('updates a purchase item while editing and refreshes checkout totals', async () => {
|
||||
const updatedPurchase = {
|
||||
id: 25,
|
||||
|
||||
@@ -437,11 +437,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
|
||||
.withCustomLoading()
|
||||
.submitPurchaseForReview(tenant.codigo, purchaseId);
|
||||
|
||||
if (purchase.status === 'paid' || purchase.status === 'pending_payment') {
|
||||
if (purchase.status === 'pending_payment') {
|
||||
this.transferValidationStatus.set('pending');
|
||||
}
|
||||
|
||||
if (purchase.status === 'paid') {
|
||||
this.navigateToPurchaseStatus(purchaseId);
|
||||
return;
|
||||
}
|
||||
@@ -580,7 +576,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy {
|
||||
.getPurchase(tenant.codigo, purchaseId);
|
||||
|
||||
if (
|
||||
(purchase.status === 'pending_payment' && purchase.expires_at === null) ||
|
||||
purchase.status === 'in_review' ||
|
||||
purchase.status === 'paid' ||
|
||||
purchase.status === 'cancelled' ||
|
||||
purchase.status === 'rejected' ||
|
||||
|
||||
@@ -35,31 +35,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@if (hasEventDates()) {
|
||||
<div class="product-detail__divider"></div>
|
||||
|
||||
<section class="product-detail__section product-detail__section--event-date">
|
||||
<label class="form-label" for="event-date-selector">Fecha</label>
|
||||
<select
|
||||
id="event-date-selector"
|
||||
class="form-select"
|
||||
[value]="selectedVariant()?.id ?? ''"
|
||||
(change)="onEventDateChange($event)"
|
||||
>
|
||||
@for (eventDate of eventDates(); track eventDate.id) {
|
||||
<option
|
||||
[value]="eventDate.variant_id"
|
||||
[disabled]="
|
||||
prod.inventory_policy !== 'unlimited' && (eventDate.stock_tecnico ?? 0) <= 0
|
||||
"
|
||||
>
|
||||
{{ eventDate.label }}
|
||||
</option>
|
||||
}
|
||||
</select>
|
||||
</section>
|
||||
}
|
||||
|
||||
@if (hasRenderableAttributes()) {
|
||||
<div class="product-detail__divider"></div>
|
||||
|
||||
|
||||
@@ -327,63 +327,6 @@ describe('ProductDetailPageComponent', () => {
|
||||
expect((swatches[0] as HTMLElement).style.backgroundColor).not.toBe('');
|
||||
});
|
||||
|
||||
it('renders event dates and resolves the selected date through its variant', async () => {
|
||||
const detailProduct: CatalogItemDetail = {
|
||||
...mockProduct,
|
||||
purpose: 'entry',
|
||||
has_tickets: true,
|
||||
variants: [
|
||||
{ id: 101, event_date_id: 20, stock_tecnico: 10, values: {} },
|
||||
{ id: 102, event_date_id: 21, stock_tecnico: 10, values: {} },
|
||||
],
|
||||
event_dates: [
|
||||
{
|
||||
id: 20,
|
||||
variant_id: 101,
|
||||
date: '2026-10-09',
|
||||
starts_at: '2026-10-09T10:00:00.000000Z',
|
||||
ends_at: '2026-10-09T20:00:00.000000Z',
|
||||
label: 'Viernes 9 de octubre - 10:00 a 20:00',
|
||||
stock_tecnico: 10,
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
variant_id: 102,
|
||||
date: '2026-10-10',
|
||||
starts_at: '2026-10-10T10:00:00.000000Z',
|
||||
ends_at: '2026-10-10T20:00:00.000000Z',
|
||||
label: 'Sábado 10 de octubre - 10:00 a 20:00',
|
||||
stock_tecnico: 10,
|
||||
},
|
||||
],
|
||||
selected_variant: {
|
||||
id: 101,
|
||||
event_date_id: 20,
|
||||
stock_tecnico: 10,
|
||||
images: [],
|
||||
values: {},
|
||||
},
|
||||
};
|
||||
resolveProduct(detailProduct);
|
||||
catalogServiceStub.getCatalogItem.mockReturnValue(
|
||||
of({ ...detailProduct, selected_variant: { ...detailProduct.selected_variant!, id: 102 } }),
|
||||
);
|
||||
|
||||
await configureTestingModule();
|
||||
const fixture = TestBed.createComponent(ProductDetailPageComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
const select = fixture.nativeElement.querySelector('#event-date-selector') as HTMLSelectElement;
|
||||
expect(select.options).toHaveLength(2);
|
||||
expect(select.value).toBe('101');
|
||||
|
||||
select.value = '102';
|
||||
select.dispatchEvent(new Event('change'));
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(catalogServiceStub.getCatalogItem).toHaveBeenCalledWith(1, 102);
|
||||
});
|
||||
|
||||
it('hides the attributes block and its extra divider when no attributes are present', async () => {
|
||||
await configureTestingModule();
|
||||
const fixture = TestBed.createComponent(ProductDetailPageComponent);
|
||||
|
||||
@@ -100,7 +100,6 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
|
||||
|
||||
const variant = this.selectedVariant();
|
||||
if (variant) return this.isVariantAvailable(variant, prod);
|
||||
if (prod.purpose === 'entry') return false;
|
||||
if (prod.variants.length > 0) return false;
|
||||
|
||||
return prod.inventory_policy === 'unlimited' || (prod.stock_tecnico ?? 0) > 0;
|
||||
@@ -109,14 +108,8 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
|
||||
protected readonly descriptionMaxHeight = signal(0);
|
||||
protected readonly descriptionHasOverflow = signal(false);
|
||||
protected readonly renderableAttributes = computed(() =>
|
||||
(this.product()?.attributes ?? []).filter(
|
||||
(attribute) =>
|
||||
attribute.options.length > 0 &&
|
||||
!(this.product()?.purpose === 'entry' && attribute.codigo === 'fecha'),
|
||||
),
|
||||
(this.product()?.attributes ?? []).filter((attribute) => attribute.options.length > 0),
|
||||
);
|
||||
protected readonly eventDates = computed(() => this.product()?.event_dates ?? []);
|
||||
protected readonly hasEventDates = computed(() => this.eventDates().length > 0);
|
||||
protected readonly hasRenderableAttributes = computed(
|
||||
() => this.renderableAttributes().length > 0,
|
||||
);
|
||||
@@ -166,26 +159,26 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
|
||||
.withCustomLoading()
|
||||
.getCatalogItem(productId, variantId)
|
||||
.subscribe({
|
||||
next: (prod) => {
|
||||
this.applyProduct(prod, false);
|
||||
this.variantLoading.set(false);
|
||||
},
|
||||
error: (err: HttpErrorResponse) => {
|
||||
const errorMessage = err.error?.message || 'No pudimos cargar la variante seleccionada.';
|
||||
this.toastService.danger(errorMessage);
|
||||
this.variantLoading.set(false);
|
||||
next: (prod) => {
|
||||
this.applyProduct(prod, false);
|
||||
this.variantLoading.set(false);
|
||||
},
|
||||
error: (err: HttpErrorResponse) => {
|
||||
const errorMessage = err.error?.message || 'No pudimos cargar la variante seleccionada.';
|
||||
this.toastService.danger(errorMessage);
|
||||
this.variantLoading.set(false);
|
||||
|
||||
this.product.update((currentProduct) => {
|
||||
if (!currentProduct) return null;
|
||||
return {
|
||||
...currentProduct,
|
||||
variants: currentProduct.variants.filter((variant) => variant.id !== variantId),
|
||||
};
|
||||
});
|
||||
this.product.update((currentProduct) => {
|
||||
if (!currentProduct) return null;
|
||||
return {
|
||||
...currentProduct,
|
||||
variants: currentProduct.variants.filter((variant) => variant.id !== variantId),
|
||||
};
|
||||
});
|
||||
|
||||
this.attributeSelector()?.reset();
|
||||
},
|
||||
});
|
||||
this.attributeSelector()?.reset();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private applyResolvedData(resolvedData: ProductDetailResolvedData): void {
|
||||
@@ -247,12 +240,6 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
protected onEventDateChange(event: Event): void {
|
||||
const variantId = Number((event.target as HTMLSelectElement).value);
|
||||
const variant = this.product()?.variants.find((item) => item.id === variantId) ?? null;
|
||||
this.onVariantChange(variant);
|
||||
}
|
||||
|
||||
protected addToCart(): void {
|
||||
const currentProduct = this.product();
|
||||
const variant = this.selectedVariant();
|
||||
@@ -266,17 +253,17 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
|
||||
.withCustomLoading()
|
||||
.addItem(currentProduct.id, variant?.id ?? null, this.quantity())
|
||||
.subscribe({
|
||||
next: (res) => {
|
||||
const msg = res.message || 'Producto agregado al carrito';
|
||||
this.toastService.success(msg);
|
||||
this.addingToCart.set(false);
|
||||
},
|
||||
error: (err: HttpErrorResponse) => {
|
||||
const errorMessage = err.error?.message || 'No se pudo agregar el producto al carrito.';
|
||||
this.toastService.danger(errorMessage);
|
||||
this.addingToCart.set(false);
|
||||
},
|
||||
});
|
||||
next: (res) => {
|
||||
const msg = res.message || 'Producto agregado al carrito';
|
||||
this.toastService.success(msg);
|
||||
this.addingToCart.set(false);
|
||||
},
|
||||
error: (err: HttpErrorResponse) => {
|
||||
const errorMessage = err.error?.message || 'No se pudo agregar el producto al carrito.';
|
||||
this.toastService.danger(errorMessage);
|
||||
this.addingToCart.set(false);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
protected async buyNow(): Promise<void> {
|
||||
|
||||
@@ -18,9 +18,10 @@
|
||||
|
||||
:host ::ng-deep .recover-password-code-page__inputs .form-control {
|
||||
min-height: 52px;
|
||||
padding: 0.5rem;
|
||||
padding: 0.5rem !important;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .recover-password-code-page__resend-action {
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
@if (mainCarouselImages(); as images) {
|
||||
@if (images.length) {
|
||||
@if (tenant()?.main_carousel_images; as mainCarouselImages) {
|
||||
@if (mainCarouselImages.length) {
|
||||
<app-main-carousel
|
||||
class="store-home__main-carousel"
|
||||
[images]="images"
|
||||
[images]="mainCarouselImages"
|
||||
ariaLabel="Imágenes destacadas de la tienda"
|
||||
(firstImageReady)="mainCarouselReady.set(true)"
|
||||
/>
|
||||
}
|
||||
}
|
||||
|
||||
@if (heroConfig() || eventConfig()) {
|
||||
<app-hero-banner [heroConfig]="heroConfig()" [eventConfig]="eventConfig()" />
|
||||
@if (tenant()?.hero_config || tenant()?.event_config) {
|
||||
<app-hero-banner
|
||||
[heroConfig]="tenant()?.hero_config"
|
||||
[eventConfig]="tenant()?.event_config"
|
||||
></app-hero-banner>
|
||||
}
|
||||
|
||||
@if (error()) {
|
||||
@@ -37,9 +40,3 @@
|
||||
</app-store-section>
|
||||
}
|
||||
}
|
||||
|
||||
@if (additionalInfo(); as content) {
|
||||
<app-store-section class="store-home__additional-info" title="Información adicional">
|
||||
<div class="store-home__additional-info-content" [innerHTML]="content"></div>
|
||||
</app-store-section>
|
||||
}
|
||||
|
||||
@@ -11,25 +11,6 @@ app-store-section + app-store-section {
|
||||
margin-top: clamp(3rem, 6vw, 5rem);
|
||||
}
|
||||
|
||||
:host > .store-home__additional-info:not(:first-child) {
|
||||
margin-top: clamp(3rem, 6vw, 5rem);
|
||||
}
|
||||
|
||||
.store-home__additional-info-content {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::ng-deep .store-home__additional-info-content img {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
::ng-deep .store-home__additional-info-content > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.store-home__alert-error {
|
||||
margin: 0;
|
||||
border-color: rgba(var(--tenant-danger-rgb, 220, 53, 69), 0.18);
|
||||
|
||||
@@ -16,7 +16,6 @@ import { Tenant } from '../../../../core/services/tenant.interface';
|
||||
import { TenantService } from '../../../../core/services/tenant.service';
|
||||
import { ToastService } from '../../../../core/services/toast.service';
|
||||
import { ProductListComponent } from '../../../../shared/components/product-list/product-list.component';
|
||||
import { HeroBannerComponent } from '../../../../shared/components/hero-banner/hero-banner.component';
|
||||
import { StoreHomePageComponent } from './store-home-page.component';
|
||||
import {
|
||||
STORE_HOME_PRODUCTS_ERROR_MESSAGE,
|
||||
@@ -89,7 +88,7 @@ const pageOneItems: CatalogFeaturedItem[] = [
|
||||
},
|
||||
];
|
||||
|
||||
function createTenant(extras: Tenant['extras'] = {}): Tenant {
|
||||
function createTenant(mainCarouselImages?: string[]): Tenant {
|
||||
return {
|
||||
id: 1,
|
||||
codigo: 'acme',
|
||||
@@ -103,18 +102,8 @@ function createTenant(extras: Tenant['extras'] = {}): Tenant {
|
||||
footer_bg_color: '#ffffff',
|
||||
header_logo: '/header.png',
|
||||
footer_logo: '/footer.png',
|
||||
website_type_code: 'shopit',
|
||||
website_type: {
|
||||
codigo: 'shopit',
|
||||
nombre: 'ShopIt',
|
||||
primary_color: null,
|
||||
secondary_color: null,
|
||||
danger_color: null,
|
||||
success_color: null,
|
||||
site_logo: null,
|
||||
},
|
||||
extras,
|
||||
categories: [],
|
||||
main_carousel_images: mainCarouselImages,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -157,82 +146,11 @@ describe('StoreHomePageComponent', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('renders the carousel URLs received in tenant extras', async () => {
|
||||
const carousel = ['https://example.com/carousel-1.webp', 'https://example.com/carousel-2.webp'];
|
||||
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [StoreHomePageComponent],
|
||||
providers: [
|
||||
provideActivatedRoute({ response: createCatalog(), error: null }),
|
||||
{
|
||||
provide: CatalogService,
|
||||
useValue: { getCatalog: vi.fn(), getFeaturedGroupItems: vi.fn() },
|
||||
},
|
||||
{
|
||||
provide: TenantService,
|
||||
useValue: createTenantServiceStub(createTenant({ carousel })),
|
||||
},
|
||||
],
|
||||
}).compileComponents();
|
||||
|
||||
const fixture = TestBed.createComponent(StoreHomePageComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
const element = fixture.nativeElement as HTMLElement;
|
||||
const carouselElement = element.querySelector('app-main-carousel');
|
||||
const images = carouselElement?.querySelectorAll('.main-carousel__image');
|
||||
|
||||
expect(element.firstElementChild).toBe(carouselElement);
|
||||
expect(images).toHaveLength(2);
|
||||
expect(images?.[0].getAttribute('src')).toBe(carousel[0]);
|
||||
});
|
||||
|
||||
it('renders the hero extra and the active tenant event', async () => {
|
||||
const tenant = createTenant({
|
||||
heroConfig: {
|
||||
title_html: '<h1>Fiesta Fútbol Infantil</h1>',
|
||||
description_html: '<p>Viví una jornada inolvidable de fútbol infantil.</p>',
|
||||
background_image_id: 'https://example.com/hero.jpg',
|
||||
},
|
||||
});
|
||||
tenant.active_event_id = 10;
|
||||
tenant.active_event = {
|
||||
id: 10,
|
||||
name: 'Fiesta Fútbol Infantil',
|
||||
address: 'Rosario, Santa Fe',
|
||||
dates: [
|
||||
{
|
||||
id: 20,
|
||||
date: '2026-12-05',
|
||||
time_start: '09:00:00',
|
||||
time_end: '18:00:00',
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
date: '2026-12-06',
|
||||
time_start: '09:00:00',
|
||||
time_end: '18:00:00',
|
||||
},
|
||||
],
|
||||
};
|
||||
tenant.website_type_code = 'onticket';
|
||||
tenant.social_media = [
|
||||
{
|
||||
code: 'whatsapp',
|
||||
icon: 'fa-brands fa-whatsapp',
|
||||
name: 'WhatsApp',
|
||||
url: 'https://wa.me/5493410000000',
|
||||
},
|
||||
it('renders the tenant main carousel images at the beginning of the home page', async () => {
|
||||
const mainCarouselImages = [
|
||||
'https://example.com/carousel-1.webp',
|
||||
'https://example.com/carousel-2.webp',
|
||||
];
|
||||
tenant.website_type = {
|
||||
codigo: 'onticket',
|
||||
nombre: 'OnTicket',
|
||||
primary_color: null,
|
||||
secondary_color: null,
|
||||
danger_color: null,
|
||||
success_color: null,
|
||||
site_logo: null,
|
||||
};
|
||||
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [StoreHomePageComponent],
|
||||
@@ -244,46 +162,7 @@ describe('StoreHomePageComponent', () => {
|
||||
},
|
||||
{
|
||||
provide: TenantService,
|
||||
useValue: createTenantServiceStub(tenant),
|
||||
},
|
||||
],
|
||||
}).compileComponents();
|
||||
|
||||
const fixture = TestBed.createComponent(StoreHomePageComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
const hero = (fixture.nativeElement as HTMLElement).querySelector(
|
||||
'app-hero-banner .hero-banner',
|
||||
) as HTMLElement;
|
||||
|
||||
expect(hero).not.toBeNull();
|
||||
expect(hero.style.backgroundImage).toContain('https://example.com/hero.jpg');
|
||||
expect(hero.textContent).toContain('Fiesta Fútbol Infantil');
|
||||
expect(hero.textContent).toContain('Viví una jornada inolvidable de fútbol infantil.');
|
||||
expect(hero.textContent).toContain('Rosario, Santa Fe');
|
||||
expect(hero.textContent).toContain('2026-12-05, 2026-12-06');
|
||||
const heroComponent = fixture.debugElement.query(By.directive(HeroBannerComponent))
|
||||
.componentInstance as HeroBannerComponent;
|
||||
expect(heroComponent.eventConfig?.contact).toEqual(tenant.social_media);
|
||||
});
|
||||
|
||||
it('renders additional information as an HTML section', async () => {
|
||||
const description =
|
||||
'<p>Consultá los <strong>términos del evento</strong>.</p><ul><li>Ingreso con DNI</li></ul>';
|
||||
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [StoreHomePageComponent],
|
||||
providers: [
|
||||
provideActivatedRoute({ response: createCatalog(), error: null }),
|
||||
{
|
||||
provide: CatalogService,
|
||||
useValue: { getCatalog: vi.fn(), getFeaturedGroupItems: vi.fn() },
|
||||
},
|
||||
{
|
||||
provide: TenantService,
|
||||
useValue: createTenantServiceStub(
|
||||
createTenant({ additionalInfoConfig: { description } }),
|
||||
),
|
||||
useValue: createTenantServiceStub(createTenant(mainCarouselImages)),
|
||||
},
|
||||
],
|
||||
}).compileComponents();
|
||||
@@ -292,18 +171,25 @@ describe('StoreHomePageComponent', () => {
|
||||
fixture.detectChanges();
|
||||
|
||||
const element = fixture.nativeElement as HTMLElement;
|
||||
const section = element.querySelector('.store-home__additional-info');
|
||||
const sections = element.querySelectorAll(':scope > app-store-section');
|
||||
const carousel = element.querySelector('app-main-carousel');
|
||||
const images = carousel?.querySelectorAll('.main-carousel__image');
|
||||
|
||||
expect(sections[sections.length - 1]).toBe(section);
|
||||
expect(section?.querySelector('.store-section__title')?.textContent?.trim()).toBe(
|
||||
'Información adicional',
|
||||
);
|
||||
expect(section?.querySelector('strong')?.textContent).toBe('términos del evento');
|
||||
expect(section?.querySelector('li')?.textContent).toBe('Ingreso con DNI');
|
||||
expect(element.firstElementChild).toBe(carousel);
|
||||
expect(images).toHaveLength(2);
|
||||
expect(images?.[0].getAttribute('src')).toBe(mainCarouselImages[0]);
|
||||
expect(images?.[1].getAttribute('src')).toBeNull();
|
||||
expect(element.querySelectorAll('app-product-column-with-image img')).toHaveLength(0);
|
||||
|
||||
images?.[0].dispatchEvent(new Event('load'));
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(images?.[1].getAttribute('src')).toBe(mainCarouselImages[1]);
|
||||
expect(element.querySelectorAll('app-product-column-with-image img')).toHaveLength(1);
|
||||
|
||||
fixture.destroy();
|
||||
});
|
||||
|
||||
it('does not render the additional information section without content', async () => {
|
||||
it('does not render the main carousel when the tenant has no images', async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [StoreHomePageComponent],
|
||||
providers: [
|
||||
@@ -314,9 +200,7 @@ describe('StoreHomePageComponent', () => {
|
||||
},
|
||||
{
|
||||
provide: TenantService,
|
||||
useValue: createTenantServiceStub(
|
||||
createTenant({ additionalInfoConfig: { description: ' ' } }),
|
||||
),
|
||||
useValue: createTenantServiceStub(createTenant([])),
|
||||
},
|
||||
],
|
||||
}).compileComponents();
|
||||
@@ -324,57 +208,7 @@ describe('StoreHomePageComponent', () => {
|
||||
const fixture = TestBed.createComponent(StoreHomePageComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(
|
||||
(fixture.nativeElement as HTMLElement).querySelector('.store-home__additional-info'),
|
||||
).toBeNull();
|
||||
});
|
||||
|
||||
it('renders only the active event data when the tenant does not have the hero extra', async () => {
|
||||
const tenant = createTenant();
|
||||
tenant.active_event_id = 12;
|
||||
tenant.active_event = {
|
||||
id: 12,
|
||||
name: 'Fiesta Fútbol Infantil',
|
||||
address: 'Sunchales, Santa Fe',
|
||||
dates: [
|
||||
{
|
||||
id: 25,
|
||||
date: '2026-10-09',
|
||||
time_start: '09:00:00',
|
||||
time_end: '18:00:00',
|
||||
},
|
||||
],
|
||||
};
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [StoreHomePageComponent],
|
||||
providers: [
|
||||
provideActivatedRoute({ response: createCatalog(), error: null }),
|
||||
{
|
||||
provide: CatalogService,
|
||||
useValue: { getCatalog: vi.fn(), getFeaturedGroupItems: vi.fn() },
|
||||
},
|
||||
{
|
||||
provide: TenantService,
|
||||
useValue: createTenantServiceStub(tenant),
|
||||
},
|
||||
],
|
||||
}).compileComponents();
|
||||
|
||||
const fixture = TestBed.createComponent(StoreHomePageComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
const element = fixture.nativeElement as HTMLElement;
|
||||
const heroComponent = fixture.debugElement.query(By.directive(HeroBannerComponent))
|
||||
.componentInstance as HeroBannerComponent;
|
||||
|
||||
expect(heroComponent.heroConfig).toBeNull();
|
||||
expect(element.querySelector('.hero-banner')).toBeNull();
|
||||
expect(element.querySelector('.hero-banner-container')).toBeNull();
|
||||
expect(element.querySelector('.hero-content')).toBeNull();
|
||||
expect(element.querySelector('.event-card')).not.toBeNull();
|
||||
expect(element.textContent).toContain('Fiesta Fútbol Infantil');
|
||||
expect(element.textContent).toContain('Sunchales, Santa Fe');
|
||||
expect(element.textContent).toContain('2026-10-09');
|
||||
expect((fixture.nativeElement as HTMLElement).querySelector('app-main-carousel')).toBeNull();
|
||||
});
|
||||
|
||||
it('requests another page for the selected featured group', async () => {
|
||||
@@ -489,9 +323,9 @@ describe('StoreHomePageComponent', () => {
|
||||
it('adds a product-list cart event to the cart', async () => {
|
||||
const catalogServiceStub = { getCatalog: vi.fn(), getFeaturedGroupItems: vi.fn() };
|
||||
const cartServiceStub = {
|
||||
addItem: vi
|
||||
.fn()
|
||||
.mockReturnValue(of({ data: {}, message: 'Producto agregado correctamente' })),
|
||||
addItem: vi.fn().mockReturnValue(
|
||||
of({ data: {}, message: 'Producto agregado correctamente' }),
|
||||
),
|
||||
};
|
||||
const toastServiceStub = { success: vi.fn(), danger: vi.fn() };
|
||||
|
||||
|
||||
@@ -60,34 +60,9 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
|
||||
protected readonly error = signal<string | null>(null);
|
||||
protected readonly mainCarouselReady = signal(false);
|
||||
protected readonly creatingDirectPurchase = signal(false);
|
||||
protected readonly mainCarouselImages = computed(() => this.tenant()?.extras?.carousel ?? []);
|
||||
protected readonly heroConfig = computed(() => this.tenant()?.extras?.heroConfig ?? null);
|
||||
protected readonly additionalInfo = computed(
|
||||
() => this.tenant()?.extras?.additionalInfoConfig?.description?.trim() || null,
|
||||
protected readonly hasMainCarouselImages = computed(
|
||||
() => (this.tenant()?.main_carousel_images?.length ?? 0) > 0,
|
||||
);
|
||||
protected readonly eventConfig = computed(() => {
|
||||
const tenant = this.tenant();
|
||||
const contact = tenant?.social_media ?? [];
|
||||
const activeEvent = tenant?.active_event;
|
||||
|
||||
if (activeEvent) {
|
||||
return {
|
||||
id: activeEvent.id,
|
||||
title: activeEvent.name,
|
||||
location: activeEvent.address,
|
||||
dates: activeEvent.dates.map((eventDate) => ({
|
||||
id: eventDate.id,
|
||||
date: eventDate.date,
|
||||
start_time: eventDate.time_start,
|
||||
end_time: eventDate.time_end,
|
||||
})),
|
||||
contact,
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
protected readonly hasMainCarouselImages = computed(() => this.mainCarouselImages().length > 0);
|
||||
|
||||
private catalogRequestSubscription: Subscription | null = null;
|
||||
private readonly groupRequestSubscriptions = new Map<number, Subscription>();
|
||||
@@ -134,20 +109,20 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
|
||||
.withCustomLoading()
|
||||
.getFeaturedGroupItems(groupId, { page })
|
||||
.subscribe({
|
||||
next: (items) => {
|
||||
this.catalog.update((groups) =>
|
||||
groups.map((candidate) =>
|
||||
candidate.id === groupId ? { ...candidate, items } : candidate,
|
||||
),
|
||||
);
|
||||
this.error.set(null);
|
||||
},
|
||||
error: () => {
|
||||
this.error.set(STORE_HOME_PRODUCTS_ERROR_MESSAGE);
|
||||
this.setGroupLoading(groupId, false);
|
||||
},
|
||||
complete: () => this.setGroupLoading(groupId, false),
|
||||
});
|
||||
next: (items) => {
|
||||
this.catalog.update((groups) =>
|
||||
groups.map((candidate) =>
|
||||
candidate.id === groupId ? { ...candidate, items } : candidate,
|
||||
),
|
||||
);
|
||||
this.error.set(null);
|
||||
},
|
||||
error: () => {
|
||||
this.error.set(STORE_HOME_PRODUCTS_ERROR_MESSAGE);
|
||||
this.setGroupLoading(groupId, false);
|
||||
},
|
||||
complete: () => this.setGroupLoading(groupId, false),
|
||||
});
|
||||
|
||||
this.groupRequestSubscriptions.set(groupId, subscription);
|
||||
}
|
||||
@@ -214,14 +189,14 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
|
||||
.withCustomLoading()
|
||||
.getCatalog()
|
||||
.subscribe({
|
||||
next: (catalog) => this.catalog.set(catalog),
|
||||
error: () => {
|
||||
this.catalog.set([]);
|
||||
this.loading.set(false);
|
||||
this.error.set(STORE_HOME_PRODUCTS_ERROR_MESSAGE);
|
||||
},
|
||||
complete: () => this.loading.set(false),
|
||||
});
|
||||
next: (catalog) => this.catalog.set(catalog),
|
||||
error: () => {
|
||||
this.catalog.set([]);
|
||||
this.loading.set(false);
|
||||
this.error.set(STORE_HOME_PRODUCTS_ERROR_MESSAGE);
|
||||
},
|
||||
complete: () => this.loading.set(false),
|
||||
});
|
||||
}
|
||||
|
||||
private applyResolvedData(resolvedData: StoreHomeCatalogResolvedData): void {
|
||||
|
||||
@@ -1,18 +1,11 @@
|
||||
<div [class.hero-banner-container]="heroConfig">
|
||||
<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',
|
||||
}"
|
||||
<div class="hero-banner-container">
|
||||
<div
|
||||
class="hero-banner position-relative rounded"
|
||||
[ngStyle]="{'background-image': heroConfig?.background_image ? 'url(' + heroConfig.background_image + ')' : 'none'}"
|
||||
>
|
||||
|
||||
@if (heroConfig) {
|
||||
<div
|
||||
class="hero-content d-flex justify-content-end p-4 p-md-5 w-100 h-100 align-items-center"
|
||||
>
|
||||
<div class="hero-content d-flex justify-content-end p-4 p-md-5 w-100 h-100 align-items-center">
|
||||
<div class="hero-text-box">
|
||||
@if (heroConfig.title_html) {
|
||||
<div class="hero-title" [innerHTML]="heroConfig.title_html"></div>
|
||||
@@ -21,10 +14,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="text-decoration-none mt-3 d-inline-block">
|
||||
<app-button variant="primary">
|
||||
{{ heroConfig.button_text }}
|
||||
</app-button>
|
||||
@@ -35,18 +25,13 @@
|
||||
}
|
||||
|
||||
@if (eventConfig) {
|
||||
<div
|
||||
class="event-card-container w-100 d-flex justify-content-center"
|
||||
[class.position-absolute]="heroConfig"
|
||||
>
|
||||
<div class="event-card-container position-absolute w-100 d-flex justify-content-center">
|
||||
<div 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>
|
||||
}
|
||||
|
||||
<div
|
||||
class="event-details d-flex flex-column flex-md-row justify-content-center align-items-center gap-3 gap-md-5 text-muted"
|
||||
>
|
||||
|
||||
<div class="event-details d-flex flex-column flex-md-row justify-content-center align-items-center gap-3 gap-md-5 text-muted">
|
||||
@if (eventConfig.dates && eventConfig.dates.length > 0) {
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="fa-regular fa-calendar event-icon"></i>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { EventConfig, HeroConfig } from '../../../core/services/tenant.interface';
|
||||
import { HeroConfig, EventConfig } from '../../../core/services/tenant.interface';
|
||||
import { ButtonComponent } from '../button/button.component';
|
||||
|
||||
@Component({
|
||||
@@ -17,14 +17,25 @@ export class HeroBannerComponent {
|
||||
@Input() eventConfig?: EventConfig | null;
|
||||
|
||||
get formattedDates(): string {
|
||||
if (this.eventConfig?.dates_text) {
|
||||
return this.eventConfig.dates_text;
|
||||
}
|
||||
|
||||
if (!this.eventConfig?.dates || this.eventConfig.dates.length === 0) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// Si ya viene formateado o es un string libre largo, lo devolvemos
|
||||
if (this.eventConfig.dates.length === 1 && this.eventConfig.dates[0].length > 10) {
|
||||
return this.eventConfig.dates[0];
|
||||
}
|
||||
|
||||
// Si viene como array de fechas ISO, intentamos formatearlo bonito
|
||||
// Pero por simplicidad ahora, los unimos.
|
||||
// Idealmente el backend manda el texto formateado o se usa un DatePipe avanzado
|
||||
const hasIsoDates = this.eventConfig.dates.some(d => d.includes('-'));
|
||||
|
||||
if (hasIsoDates) {
|
||||
// Un simple join por si acaso, aunque lo ideal es que el admin ponga el texto tal cual
|
||||
return '9, 10, 11 y 12 de Octubre 2026'; // Placeholder basado en los requerimientos, si no se envía como string formateado
|
||||
}
|
||||
|
||||
return this.eventConfig.dates.map(({ date }) => date).join(', ');
|
||||
return this.eventConfig.dates.join(', ');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="e">
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>ShopitFront</title>
|
||||
|
||||
Reference in New Issue
Block a user