Compare commits
3 Commits
feature/al
...
homologaci
| Author | SHA1 | Date | |
|---|---|---|---|
| 85529f40f2 | |||
| 4a952af784 | |||
| b1d4c4d13d |
@@ -115,6 +115,6 @@ describe('App', () => {
|
||||
expect(fixture.nativeElement.textContent).toContain('No encontramos una tienda para este dominio');
|
||||
expect(document.title).toBe('ShopitFront');
|
||||
expect(document.head.querySelector<HTMLLinkElement>('link[rel~="icon"]')?.getAttribute('href'))
|
||||
.toBe('favicon.ico');
|
||||
.toBe("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -9,6 +9,8 @@ import { GlobalLoadingComponent } from './shared/components/global-loading/globa
|
||||
import { ModalHostComponent } from './shared/components/modal-host/modal-host.component';
|
||||
import { ToastContainerComponent } from './shared/components/toast-container/toast-container.component';
|
||||
|
||||
const EMPTY_FAVICON = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E";
|
||||
|
||||
function hexToRgb(hex: string): string {
|
||||
const cleanHex = hex.replace('#', '').trim();
|
||||
let r = 0, g = 0, b = 0;
|
||||
@@ -66,7 +68,7 @@ export class App {
|
||||
effect(() => {
|
||||
const tenant = this.tenantService.tenant();
|
||||
const siteTitle = tenant?.site_title?.trim() || 'ShopitFront';
|
||||
const faviconHref = tenant?.favicon || 'favicon.ico';
|
||||
const faviconHref = tenant?.favicon || EMPTY_FAVICON;
|
||||
|
||||
this.title.setTitle(siteTitle);
|
||||
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import { CatalogAvailability } from './catalog.interface';
|
||||
import {
|
||||
allowsCatalogAction,
|
||||
combineCatalogAvailability,
|
||||
createCatalogAvailability,
|
||||
maximumCatalogQuantity,
|
||||
} from './catalog-availability';
|
||||
|
||||
describe('catalog availability', () => {
|
||||
it('represents hidden items without irrelevant actions or quantities', () => {
|
||||
const availability = createCatalogAvailability(0);
|
||||
|
||||
expect(availability).toEqual({
|
||||
state: 'hidden',
|
||||
reasons: [
|
||||
{
|
||||
code: 'out_of_stock',
|
||||
message: 'Este producto no tiene stock disponible.',
|
||||
},
|
||||
],
|
||||
});
|
||||
expect(allowsCatalogAction(availability, 'buy_now')).toBe(false);
|
||||
expect(maximumCatalogQuantity(availability)).toBe(0);
|
||||
});
|
||||
|
||||
it('intersects product and variant actions and quantities', () => {
|
||||
const product: CatalogAvailability = {
|
||||
state: 'visible',
|
||||
maximum_quantity: 3,
|
||||
allowed_actions: ['select_variant', 'change_quantity'],
|
||||
reasons: [{ code: 'limited', message: 'Corregí la selección.' }],
|
||||
};
|
||||
const variant: CatalogAvailability = {
|
||||
state: 'visible',
|
||||
maximum_quantity: 2,
|
||||
allowed_actions: ['change_quantity', 'add_to_cart'],
|
||||
reasons: [],
|
||||
};
|
||||
|
||||
expect(combineCatalogAvailability(product, variant)).toEqual({
|
||||
state: 'visible',
|
||||
maximum_quantity: 2,
|
||||
allowed_actions: ['change_quantity'],
|
||||
reasons: [{ code: 'limited', message: 'Corregí la selección.' }],
|
||||
});
|
||||
});
|
||||
|
||||
it('lets a hidden decision win composition', () => {
|
||||
const availability = combineCatalogAvailability(
|
||||
createCatalogAvailability(5),
|
||||
createCatalogAvailability(0),
|
||||
);
|
||||
|
||||
expect(availability.state).toBe('hidden');
|
||||
expect(allowsCatalogAction(availability, 'add_to_cart')).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -1,80 +0,0 @@
|
||||
import { CatalogAction, CatalogAvailability } from './catalog.interface';
|
||||
|
||||
const ALL_CATALOG_ACTIONS: CatalogAction[] = [
|
||||
'select_variant',
|
||||
'change_quantity',
|
||||
'add_to_cart',
|
||||
'buy_now',
|
||||
];
|
||||
|
||||
export const AVAILABLE_CATALOG_AVAILABILITY: CatalogAvailability = {
|
||||
state: 'visible',
|
||||
maximum_quantity: null,
|
||||
allowed_actions: ALL_CATALOG_ACTIONS,
|
||||
reasons: [],
|
||||
};
|
||||
|
||||
export function createCatalogAvailability(maximumQuantity: number | null): CatalogAvailability {
|
||||
const unavailable = maximumQuantity === 0;
|
||||
|
||||
if (unavailable) {
|
||||
return {
|
||||
state: 'hidden',
|
||||
reasons: [
|
||||
{
|
||||
code: 'out_of_stock',
|
||||
message: 'Este producto no tiene stock disponible.',
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
state: 'visible',
|
||||
maximum_quantity: maximumQuantity,
|
||||
allowed_actions: [...ALL_CATALOG_ACTIONS],
|
||||
reasons: [],
|
||||
};
|
||||
}
|
||||
|
||||
export function primaryAvailabilityMessage(availability: CatalogAvailability): string | null {
|
||||
return availability.reasons[0]?.message ?? null;
|
||||
}
|
||||
|
||||
export function allowsCatalogAction(
|
||||
availability: CatalogAvailability,
|
||||
action: CatalogAction,
|
||||
): boolean {
|
||||
return availability.state === 'visible' && availability.allowed_actions.includes(action);
|
||||
}
|
||||
|
||||
export function maximumCatalogQuantity(availability: CatalogAvailability): number | null {
|
||||
return availability.state === 'visible' ? availability.maximum_quantity : 0;
|
||||
}
|
||||
|
||||
export function combineCatalogAvailability(
|
||||
product: CatalogAvailability,
|
||||
variant?: CatalogAvailability | null,
|
||||
): CatalogAvailability {
|
||||
if (!variant) return product;
|
||||
|
||||
const reasons = [...product.reasons, ...variant.reasons];
|
||||
if (product.state === 'hidden' || variant.state === 'hidden') {
|
||||
return { state: 'hidden', reasons };
|
||||
}
|
||||
|
||||
return {
|
||||
state: 'visible',
|
||||
maximum_quantity: minimumNullable(product.maximum_quantity, variant.maximum_quantity),
|
||||
allowed_actions: product.allowed_actions.filter((action) =>
|
||||
variant.allowed_actions.includes(action),
|
||||
),
|
||||
reasons,
|
||||
};
|
||||
}
|
||||
|
||||
function minimumNullable(left: number | null, right: number | null): number | null {
|
||||
if (left === null) return right;
|
||||
if (right === null) return left;
|
||||
return Math.min(left, right);
|
||||
}
|
||||
@@ -49,25 +49,6 @@ export interface ProductAttribute {
|
||||
|
||||
export type InventoryPolicy = 'tracked' | 'unlimited';
|
||||
|
||||
export interface CatalogRestriction {
|
||||
code: 'out_of_stock' | 'user_quota_reached' | string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export type CatalogAction = 'select_variant' | 'change_quantity' | 'add_to_cart' | 'buy_now';
|
||||
|
||||
export type CatalogAvailability =
|
||||
| {
|
||||
state: 'hidden';
|
||||
reasons: CatalogRestriction[];
|
||||
}
|
||||
| {
|
||||
state: 'visible';
|
||||
maximum_quantity: number | null;
|
||||
allowed_actions: CatalogAction[];
|
||||
reasons: CatalogRestriction[];
|
||||
};
|
||||
|
||||
export interface CatalogVariantOption {
|
||||
value: string;
|
||||
label: string;
|
||||
@@ -85,7 +66,8 @@ export interface CatalogItemVariant {
|
||||
event_date_id?: number | null;
|
||||
event_date_ids?: number[];
|
||||
event_dates?: string[];
|
||||
availability: CatalogAvailability;
|
||||
maximum_addable_quantity?: number | null;
|
||||
unavailable_message?: string | null;
|
||||
minimum_use_date?: string | null;
|
||||
maximum_use_date?: string | null;
|
||||
effective_minimum_use_date?: string | null;
|
||||
@@ -117,7 +99,7 @@ export interface CatalogItemDetail {
|
||||
attributes: ProductAttribute[];
|
||||
variants: CatalogItemVariant[];
|
||||
selected_variant?: SelectedCatalogItemVariant;
|
||||
availability: CatalogAvailability;
|
||||
maximum_addable_quantity?: number | null;
|
||||
images?: string[];
|
||||
}
|
||||
|
||||
@@ -132,7 +114,8 @@ export interface CatalogFeaturedItemVariant {
|
||||
id: number;
|
||||
descripcion?: string | null;
|
||||
precio?: string;
|
||||
availability: CatalogAvailability;
|
||||
maximum_addable_quantity?: number | null;
|
||||
unavailable_message?: string | null;
|
||||
values: Record<string, CatalogVariantValue>;
|
||||
}
|
||||
|
||||
@@ -164,7 +147,8 @@ export interface CatalogFeaturedItem {
|
||||
descripcion?: string | null;
|
||||
precio: number | string;
|
||||
image?: string | null;
|
||||
availability: CatalogAvailability;
|
||||
maximum_addable_quantity?: number | null;
|
||||
unavailable_message?: string | null;
|
||||
variants?: CatalogFeaturedItemVariant[];
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,6 @@ import { StoreSectionComponent } from '../../../../shared/components/store-secti
|
||||
import { ModalService } from '../../../../core/services/modal.service';
|
||||
import { TenantService } from '../../../../core/services/tenant.service';
|
||||
import { ToastService } from '../../../../core/services/toast.service';
|
||||
import { createCatalogAvailability } from '../../../../core/services/catalog/catalog-availability';
|
||||
import { StepperComponent } from '../../../../shared/components/stepper/stepper.component';
|
||||
import { StepComponent } from '../../../../shared/components/stepper/step.component';
|
||||
import { CarouselComponent } from '../../../../shared/components/carousel/carousel.component';
|
||||
@@ -233,7 +232,7 @@ export class ReutilizablesTestPageComponent {
|
||||
{
|
||||
id: 1001,
|
||||
precio: 250000,
|
||||
availability: createCatalogAvailability(1),
|
||||
maximum_addable_quantity: 1,
|
||||
values: {
|
||||
tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
|
||||
sector: ticketOption('a', 'Sector A'),
|
||||
@@ -244,7 +243,7 @@ export class ReutilizablesTestPageComponent {
|
||||
{
|
||||
id: 1002,
|
||||
precio: 250000,
|
||||
availability: createCatalogAvailability(1),
|
||||
maximum_addable_quantity: 1,
|
||||
values: {
|
||||
tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
|
||||
sector: ticketOption('a', 'Sector A'),
|
||||
@@ -255,7 +254,7 @@ export class ReutilizablesTestPageComponent {
|
||||
{
|
||||
id: 1003,
|
||||
precio: 250000,
|
||||
availability: createCatalogAvailability(1),
|
||||
maximum_addable_quantity: 1,
|
||||
values: {
|
||||
tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
|
||||
sector: ticketOption('c', 'Sector C'),
|
||||
@@ -266,7 +265,7 @@ export class ReutilizablesTestPageComponent {
|
||||
{
|
||||
id: 1004,
|
||||
precio: 200000,
|
||||
availability: createCatalogAvailability(1),
|
||||
maximum_addable_quantity: 1,
|
||||
values: {
|
||||
tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
|
||||
sector: ticketOption('a', 'Sector A'),
|
||||
@@ -277,7 +276,7 @@ export class ReutilizablesTestPageComponent {
|
||||
{
|
||||
id: 1005,
|
||||
precio: 200000,
|
||||
availability: createCatalogAvailability(0),
|
||||
maximum_addable_quantity: 0,
|
||||
values: {
|
||||
tipo: ticketOption('vip_lunch', 'VIP + Lunch'),
|
||||
sector: ticketOption('a', 'Sector A'),
|
||||
@@ -288,7 +287,7 @@ export class ReutilizablesTestPageComponent {
|
||||
{
|
||||
id: 1006,
|
||||
precio: 100000,
|
||||
availability: createCatalogAvailability(1),
|
||||
maximum_addable_quantity: 1,
|
||||
values: {
|
||||
tipo: ticketOption('general', 'General'),
|
||||
sector: ticketOption('b', 'Sector B'),
|
||||
@@ -299,7 +298,7 @@ export class ReutilizablesTestPageComponent {
|
||||
{
|
||||
id: 1007,
|
||||
precio: 100000,
|
||||
availability: createCatalogAvailability(1),
|
||||
maximum_addable_quantity: 1,
|
||||
values: {
|
||||
tipo: ticketOption('general', 'General'),
|
||||
sector: ticketOption('b', 'Sector B'),
|
||||
@@ -310,7 +309,7 @@ export class ReutilizablesTestPageComponent {
|
||||
{
|
||||
id: 1008,
|
||||
precio: 90000,
|
||||
availability: createCatalogAvailability(1),
|
||||
maximum_addable_quantity: 1,
|
||||
values: {
|
||||
tipo: ticketOption('general', 'General'),
|
||||
sector: ticketOption('d', 'Sector D'),
|
||||
@@ -321,7 +320,7 @@ export class ReutilizablesTestPageComponent {
|
||||
{
|
||||
id: 1009,
|
||||
precio: 65000,
|
||||
availability: createCatalogAvailability(1),
|
||||
maximum_addable_quantity: 1,
|
||||
values: {
|
||||
tipo: ticketOption('general', 'General'),
|
||||
sector: ticketOption('d', 'Sector D'),
|
||||
@@ -332,7 +331,7 @@ export class ReutilizablesTestPageComponent {
|
||||
{
|
||||
id: 1010,
|
||||
precio: 40000,
|
||||
availability: createCatalogAvailability(1),
|
||||
maximum_addable_quantity: 1,
|
||||
values: {
|
||||
tipo: ticketOption('general', 'General'),
|
||||
sector: ticketOption('d', 'Sector D'),
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
[attr.aria-label]="option.label"
|
||||
[attr.aria-pressed]="hasSelectedOption(attribute, option)"
|
||||
[title]="option.label"
|
||||
[disabled]="disabled() || !availableOptions()[attribute.codigo][option.id]"
|
||||
[disabled]="!availableOptions()[attribute.codigo][option.id]"
|
||||
(click)="selectAttributeOption(attribute, option)"
|
||||
>
|
||||
<span class="visually-hidden">{{ option.label }}</span>
|
||||
@@ -33,7 +33,7 @@
|
||||
!availableOptions()[attribute.codigo][option.id]
|
||||
"
|
||||
[attr.aria-pressed]="hasSelectedOption(attribute, option)"
|
||||
[disabled]="disabled() || !availableOptions()[attribute.codigo][option.id]"
|
||||
[disabled]="!availableOptions()[attribute.codigo][option.id]"
|
||||
(click)="selectAttributeOption(attribute, option)"
|
||||
>
|
||||
{{ option.label }}
|
||||
|
||||
@@ -2,7 +2,6 @@ import { TestBed } from '@angular/core/testing';
|
||||
import { beforeEach, describe, expect, it } from 'vitest';
|
||||
|
||||
import { ProductAttribute } from '../../../../core/services/catalog/catalog.interface';
|
||||
import { createCatalogAvailability } from '../../../../core/services/catalog/catalog-availability';
|
||||
import { ProductAttributeSelectorComponent } from './product-attribute-selector.component';
|
||||
|
||||
describe('ProductAttributeSelectorComponent', () => {
|
||||
@@ -32,7 +31,7 @@ describe('ProductAttributeSelectorComponent', () => {
|
||||
fixture.componentRef.setInput('variants', [
|
||||
{
|
||||
id: 1,
|
||||
availability: createCatalogAvailability(null),
|
||||
maximum_addable_quantity: null,
|
||||
values: { size: 'S' },
|
||||
},
|
||||
]);
|
||||
@@ -52,12 +51,12 @@ describe('ProductAttributeSelectorComponent', () => {
|
||||
fixture.componentRef.setInput('variants', [
|
||||
{
|
||||
id: 1,
|
||||
availability: createCatalogAvailability(0),
|
||||
maximum_addable_quantity: 0,
|
||||
values: { size: 'S' },
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
availability: createCatalogAvailability(2),
|
||||
maximum_addable_quantity: 2,
|
||||
values: { size: 'M' },
|
||||
},
|
||||
]);
|
||||
@@ -93,9 +92,9 @@ describe('ProductAttributeSelectorComponent', () => {
|
||||
]);
|
||||
fixture.componentRef.setInput('inventoryPolicy', 'unlimited');
|
||||
fixture.componentRef.setInput('variants', [
|
||||
{ id: 1, availability: createCatalogAvailability(null), values: { event_date: '1' } },
|
||||
{ id: 2, availability: createCatalogAvailability(null), values: { event_date: '2' } },
|
||||
{ id: 3, availability: createCatalogAvailability(null), values: { event_date: ['1', '2'] } },
|
||||
{ id: 1, maximum_addable_quantity: null, values: { event_date: '1' } },
|
||||
{ id: 2, maximum_addable_quantity: null, values: { event_date: '2' } },
|
||||
{ id: 3, maximum_addable_quantity: null, values: { event_date: ['1', '2'] } },
|
||||
]);
|
||||
fixture.detectChanges();
|
||||
|
||||
@@ -136,16 +135,8 @@ describe('ProductAttributeSelectorComponent', () => {
|
||||
]);
|
||||
fixture.componentRef.setInput('inventoryPolicy', 'unlimited');
|
||||
fixture.componentRef.setInput('variants', [
|
||||
{
|
||||
id: 1,
|
||||
availability: createCatalogAvailability(null),
|
||||
values: { size: 'S', internal_type: 'adult' },
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
availability: createCatalogAvailability(null),
|
||||
values: { size: 'M', internal_type: 'child' },
|
||||
},
|
||||
{ id: 1, maximum_addable_quantity: null, values: { size: 'S', internal_type: 'adult' } },
|
||||
{ id: 2, maximum_addable_quantity: null, values: { size: 'M', internal_type: 'child' } },
|
||||
]);
|
||||
fixture.detectChanges();
|
||||
|
||||
|
||||
@@ -15,7 +15,6 @@ import {
|
||||
ProductAttribute,
|
||||
ProductAttributeOption,
|
||||
} from '../../../../core/services/catalog/catalog.interface';
|
||||
import { allowsCatalogAction } from '../../../../core/services/catalog/catalog-availability';
|
||||
|
||||
@Component({
|
||||
selector: 'app-product-attribute-selector',
|
||||
@@ -30,7 +29,6 @@ export class ProductAttributeSelectorComponent {
|
||||
public variants = input<CatalogItemVariant[]>([]);
|
||||
public selectedVariant = input<CatalogItemVariant | null>(null);
|
||||
public inventoryPolicy = input.required<InventoryPolicy>();
|
||||
public disabled = input(false);
|
||||
|
||||
public variantChange = output<CatalogItemVariant | null>();
|
||||
|
||||
@@ -53,15 +51,22 @@ export class ProductAttributeSelectorComponent {
|
||||
const optionNormalized = this.normalizeText(option.value || option.label);
|
||||
const selectedForAttribute = selections[attribute.codigo] ?? [];
|
||||
|
||||
if (
|
||||
!attribute.allow_multi_select &&
|
||||
selectedForAttribute.length >= 1 &&
|
||||
!selectedForAttribute.includes(option.id)
|
||||
) {
|
||||
availability[attribute.codigo][option.id] = false;
|
||||
continue;
|
||||
}
|
||||
|
||||
const isAvailable = variants.some((variant) => {
|
||||
if (!this.isVariantAvailable(variant)) return false;
|
||||
|
||||
const variantAttrValues = this.getVariantAttributeValues(attribute, variant.values);
|
||||
const desiredOptionIds = attribute.allow_multi_select
|
||||
? selectedForAttribute.includes(option.id)
|
||||
? selectedForAttribute
|
||||
: [...selectedForAttribute, option.id]
|
||||
: [option.id];
|
||||
const desiredOptionIds = selectedForAttribute.includes(option.id)
|
||||
? selectedForAttribute
|
||||
: [...selectedForAttribute, option.id];
|
||||
const desiredValues = desiredOptionIds
|
||||
.map((id) => attribute.options.find((candidate) => candidate.id === id))
|
||||
.filter((candidate): candidate is ProductAttributeOption => candidate !== undefined)
|
||||
@@ -132,8 +137,6 @@ export class ProductAttributeSelectorComponent {
|
||||
attribute: ProductAttribute,
|
||||
option: ProductAttributeOption,
|
||||
): void {
|
||||
if (this.disabled()) return;
|
||||
|
||||
this.selectedAttributeOptions.update((current) => {
|
||||
const selected = current[attribute.codigo] ?? [];
|
||||
const isMultiple = attribute.allow_multi_select ?? false;
|
||||
@@ -183,15 +186,7 @@ export class ProductAttributeSelectorComponent {
|
||||
return [];
|
||||
}
|
||||
|
||||
const defaultValues =
|
||||
attribute.type === 'event_date'
|
||||
? (
|
||||
variant.event_date_ids ??
|
||||
(variant.event_date_id === null || variant.event_date_id === undefined
|
||||
? []
|
||||
: [variant.event_date_id])
|
||||
).map(String)
|
||||
: this.getVariantAttributeValues(attribute, variant.values);
|
||||
const defaultValues = this.getVariantAttributeValues(attribute, variant.values);
|
||||
if (defaultValues.length === 0) {
|
||||
return [];
|
||||
}
|
||||
@@ -220,17 +215,6 @@ export class ProductAttributeSelectorComponent {
|
||||
}
|
||||
}
|
||||
|
||||
if (attribute.type === 'event_date') {
|
||||
const variant = this.variants().find((candidate) => candidate.values === variantAttributes);
|
||||
const eventDateIds =
|
||||
variant?.event_date_ids ??
|
||||
(variant?.event_date_id === null || variant?.event_date_id === undefined
|
||||
? []
|
||||
: [variant.event_date_id]);
|
||||
|
||||
return eventDateIds.map(String);
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
@@ -243,7 +227,7 @@ export class ProductAttributeSelectorComponent {
|
||||
}
|
||||
|
||||
private isVariantAvailable(variant: CatalogItemVariant): boolean {
|
||||
return allowsCatalogAction(variant.availability, 'select_variant');
|
||||
return variant.maximum_addable_quantity !== 0;
|
||||
}
|
||||
|
||||
private findFirstHexValue(value: unknown): string | null {
|
||||
|
||||
@@ -44,7 +44,6 @@
|
||||
[variants]="prod.variants"
|
||||
[selectedVariant]="prod.selected_variant ?? null"
|
||||
[inventoryPolicy]="prod.inventory_policy"
|
||||
[disabled]="!allows(prod.availability, 'select_variant')"
|
||||
(variantChange)="onVariantChange($event)"
|
||||
/>
|
||||
</section>
|
||||
@@ -54,22 +53,14 @@
|
||||
|
||||
<section class="product-detail__section">
|
||||
<div class="product-detail__purchase">
|
||||
@if (restrictionMessage(); as message) {
|
||||
<p class="mb-0 text-danger" role="status">{{ message }}</p>
|
||||
}
|
||||
|
||||
<app-quantity-selector
|
||||
[(quantity)]="quantity"
|
||||
[max]="selectedVariantMax()"
|
||||
[disabled]="!allows(effectiveAvailability(), 'change_quantity')"
|
||||
/>
|
||||
<app-quantity-selector [(quantity)]="quantity" [max]="selectedVariantMax()" />
|
||||
|
||||
<div class="product-detail__actions">
|
||||
<app-button
|
||||
class="product-detail__cta"
|
||||
variant="secondary"
|
||||
type="button"
|
||||
[disabled]="!canAddToCart() || variantLoading() || addingToCart()"
|
||||
[disabled]="!selectedVariantAvailable() || variantLoading() || addingToCart()"
|
||||
(click)="addToCart()"
|
||||
>
|
||||
@if (addingToCart()) {
|
||||
@@ -84,7 +75,9 @@
|
||||
<app-button
|
||||
class="product-detail__cta"
|
||||
type="button"
|
||||
[disabled]="!canBuyNow() || variantLoading() || creatingDirectPurchase()"
|
||||
[disabled]="
|
||||
!selectedVariantAvailable() || variantLoading() || creatingDirectPurchase()
|
||||
"
|
||||
(click)="buyNow()"
|
||||
>
|
||||
@if (variantLoading() || creatingDirectPurchase()) {
|
||||
|
||||
@@ -10,7 +10,6 @@ import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { CatalogItemDetail } from '../../../../core/services/catalog/catalog.interface';
|
||||
import { CatalogService } from '../../../../core/services/catalog/catalog.service';
|
||||
import { CatalogAvailabilityService } from '../../../../core/services/catalog/catalog-availability.service';
|
||||
import { createCatalogAvailability } from '../../../../core/services/catalog/catalog-availability';
|
||||
import { CartService } from '../../../../core/services/cart/cart.service';
|
||||
import { ToastService } from '../../../../core/services/toast.service';
|
||||
import { ProductDetailPageComponent } from './product-detail-page.component';
|
||||
@@ -39,7 +38,7 @@ describe('ProductDetailPageComponent', () => {
|
||||
has_tickets: false,
|
||||
minimum_use_date: null,
|
||||
maximum_use_date: null,
|
||||
availability: createCatalogAvailability(10),
|
||||
maximum_addable_quantity: 10,
|
||||
attributes: [],
|
||||
variants: [],
|
||||
};
|
||||
@@ -180,7 +179,7 @@ describe('ProductDetailPageComponent', () => {
|
||||
|
||||
it('reloads product availability when the cart changes', async () => {
|
||||
catalogServiceStub.getCatalogItem.mockReturnValue(
|
||||
of({ ...mockProduct, availability: createCatalogAvailability(4) }),
|
||||
of({ ...mockProduct, maximum_addable_quantity: 4 }),
|
||||
);
|
||||
await configureTestingModule();
|
||||
const fixture = TestBed.createComponent(ProductDetailPageComponent);
|
||||
@@ -193,21 +192,6 @@ describe('ProductDetailPageComponent', () => {
|
||||
expect(fixture.componentInstance['selectedVariantMax']()).toBe(4);
|
||||
});
|
||||
|
||||
it('stops presenting a product that becomes hidden during an availability refresh', async () => {
|
||||
catalogServiceStub.getCatalogItem.mockReturnValue(
|
||||
throwError(() => new HttpErrorResponse({ status: 404 })),
|
||||
);
|
||||
await configureTestingModule();
|
||||
const fixture = TestBed.createComponent(ProductDetailPageComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
TestBed.inject(CatalogAvailabilityService).notifyAvailabilityChanged();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.componentInstance['product']()).toBeNull();
|
||||
expect(fixture.nativeElement.textContent).toContain('Este producto ya no está disponible.');
|
||||
});
|
||||
|
||||
it('shows error message if the resolver cannot load the product', async () => {
|
||||
resolveProductError(PRODUCT_DETAIL_ERROR_MESSAGE);
|
||||
await configureTestingModule();
|
||||
@@ -223,10 +207,10 @@ describe('ProductDetailPageComponent', () => {
|
||||
const detailProduct: CatalogItemDetail = {
|
||||
...mockProduct,
|
||||
images: ['https://example.com/product.png'],
|
||||
variants: [{ id: 123, availability: createCatalogAvailability(10), values: {} }],
|
||||
variants: [{ id: 123, maximum_addable_quantity: 10, values: {} }],
|
||||
selected_variant: {
|
||||
id: 123,
|
||||
availability: createCatalogAvailability(10),
|
||||
maximum_addable_quantity: 10,
|
||||
images: ['https://example.com/variant1.png', 'https://example.com/variant2.png'],
|
||||
values: {},
|
||||
},
|
||||
@@ -328,15 +312,11 @@ describe('ProductDetailPageComponent', () => {
|
||||
},
|
||||
],
|
||||
variants: [
|
||||
{
|
||||
id: 123,
|
||||
availability: createCatalogAvailability(10),
|
||||
values: { color: 'beige', material: 'Cuero' },
|
||||
},
|
||||
{ id: 123, maximum_addable_quantity: 10, values: { color: 'beige', material: 'Cuero' } },
|
||||
],
|
||||
selected_variant: {
|
||||
id: 123,
|
||||
availability: createCatalogAvailability(10),
|
||||
maximum_addable_quantity: 10,
|
||||
images: ['https://example.com/variant1.png'],
|
||||
values: {
|
||||
color: 'beige',
|
||||
@@ -373,18 +353,8 @@ describe('ProductDetailPageComponent', () => {
|
||||
purpose: 'entry',
|
||||
has_tickets: true,
|
||||
variants: [
|
||||
{
|
||||
id: 101,
|
||||
event_date_id: 20,
|
||||
availability: createCatalogAvailability(10),
|
||||
values: { event_date: '20' },
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
event_date_id: 21,
|
||||
availability: createCatalogAvailability(10),
|
||||
values: { event_date: '21' },
|
||||
},
|
||||
{ id: 101, event_date_id: 20, maximum_addable_quantity: 10, values: { event_date: '20' } },
|
||||
{ id: 102, event_date_id: 21, maximum_addable_quantity: 10, values: { event_date: '21' } },
|
||||
],
|
||||
attributes: [
|
||||
{
|
||||
@@ -415,7 +385,7 @@ describe('ProductDetailPageComponent', () => {
|
||||
selected_variant: {
|
||||
id: 101,
|
||||
event_date_id: 20,
|
||||
availability: createCatalogAvailability(10),
|
||||
maximum_addable_quantity: 10,
|
||||
images: [],
|
||||
values: {},
|
||||
},
|
||||
@@ -437,8 +407,6 @@ describe('ProductDetailPageComponent', () => {
|
||||
|
||||
options[1].click();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(catalogServiceStub.getCatalogItem).toHaveBeenCalledWith(1, 102);
|
||||
});
|
||||
@@ -461,7 +429,7 @@ describe('ProductDetailPageComponent', () => {
|
||||
|
||||
fixture.componentInstance['selectedVariant'].set({
|
||||
id: 1,
|
||||
availability: createCatalogAvailability(10),
|
||||
maximum_addable_quantity: 10,
|
||||
values: {},
|
||||
});
|
||||
fixture.detectChanges();
|
||||
@@ -551,7 +519,7 @@ describe('ProductDetailPageComponent', () => {
|
||||
error: {
|
||||
code: 'purchase.limit_exceeded',
|
||||
message: 'Podés agregar hasta 2 unidades más de “Auriculares Bluetooth”.',
|
||||
availability: createCatalogAvailability(2),
|
||||
maximum_addable_quantity: 2,
|
||||
},
|
||||
}),
|
||||
);
|
||||
@@ -576,13 +544,13 @@ describe('ProductDetailPageComponent', () => {
|
||||
variants: [
|
||||
{
|
||||
id: 123,
|
||||
availability: createCatalogAvailability(5),
|
||||
maximum_addable_quantity: 5,
|
||||
values: {},
|
||||
},
|
||||
],
|
||||
selected_variant: {
|
||||
id: 123,
|
||||
availability: createCatalogAvailability(5),
|
||||
maximum_addable_quantity: 5,
|
||||
images: [],
|
||||
values: {},
|
||||
},
|
||||
@@ -615,7 +583,7 @@ describe('ProductDetailPageComponent', () => {
|
||||
resolveProduct({
|
||||
...mockProduct,
|
||||
variants: [],
|
||||
availability: createCatalogAvailability(4),
|
||||
maximum_addable_quantity: 4,
|
||||
});
|
||||
|
||||
await configureTestingModule();
|
||||
@@ -641,13 +609,13 @@ describe('ProductDetailPageComponent', () => {
|
||||
variants: [
|
||||
{
|
||||
id: 123,
|
||||
availability: createCatalogAvailability(5),
|
||||
maximum_addable_quantity: 5,
|
||||
values: {},
|
||||
},
|
||||
],
|
||||
selected_variant: {
|
||||
id: 123,
|
||||
availability: createCatalogAvailability(5),
|
||||
maximum_addable_quantity: 5,
|
||||
images: [],
|
||||
values: {},
|
||||
},
|
||||
@@ -679,7 +647,7 @@ describe('ProductDetailPageComponent', () => {
|
||||
it('allows unlimited variants to increase quantity without a maximum', async () => {
|
||||
const unlimitedVariant = {
|
||||
id: 321,
|
||||
availability: createCatalogAvailability(null),
|
||||
maximum_addable_quantity: null,
|
||||
values: {},
|
||||
};
|
||||
resolveProduct({
|
||||
@@ -687,7 +655,7 @@ describe('ProductDetailPageComponent', () => {
|
||||
inventory_policy: 'unlimited',
|
||||
selected_variant: {
|
||||
id: 321,
|
||||
availability: createCatalogAvailability(null),
|
||||
maximum_addable_quantity: null,
|
||||
images: [],
|
||||
values: {},
|
||||
},
|
||||
@@ -711,7 +679,7 @@ describe('ProductDetailPageComponent', () => {
|
||||
it('caps an unlimited variant at the per-user purchase limit', async () => {
|
||||
const unlimitedVariant = {
|
||||
id: 322,
|
||||
availability: createCatalogAvailability(2),
|
||||
maximum_addable_quantity: 2,
|
||||
values: {},
|
||||
};
|
||||
resolveProduct({
|
||||
@@ -720,7 +688,7 @@ describe('ProductDetailPageComponent', () => {
|
||||
max_units_per_user: 2,
|
||||
selected_variant: {
|
||||
id: 322,
|
||||
availability: createCatalogAvailability(2),
|
||||
maximum_addable_quantity: 2,
|
||||
images: [],
|
||||
values: { event_date: '20' },
|
||||
},
|
||||
@@ -744,14 +712,14 @@ describe('ProductDetailPageComponent', () => {
|
||||
it('disables purchase actions for tracked variants without stock', async () => {
|
||||
const trackedVariant = {
|
||||
id: 654,
|
||||
availability: createCatalogAvailability(0),
|
||||
maximum_addable_quantity: 0,
|
||||
values: {},
|
||||
};
|
||||
resolveProduct({
|
||||
...mockProduct,
|
||||
selected_variant: {
|
||||
id: 654,
|
||||
availability: createCatalogAvailability(0),
|
||||
maximum_addable_quantity: 0,
|
||||
images: [],
|
||||
values: {},
|
||||
},
|
||||
|
||||
@@ -32,13 +32,6 @@ import { ProductDetailResolvedData } from './product-detail-page.resolver';
|
||||
import { CheckoutService } from '../../../../core/services/checkout.service';
|
||||
import { TenantService } from '../../../../core/services/tenant.service';
|
||||
import { AuthService } from '../../../../core/services/auth/auth.service';
|
||||
import {
|
||||
AVAILABLE_CATALOG_AVAILABILITY,
|
||||
allowsCatalogAction,
|
||||
combineCatalogAvailability,
|
||||
maximumCatalogQuantity,
|
||||
primaryAvailabilityMessage,
|
||||
} from '../../../../core/services/catalog/catalog-availability';
|
||||
|
||||
@Component({
|
||||
selector: 'app-product-detail-page',
|
||||
@@ -103,41 +96,29 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
|
||||
() => this.selectedVariant()?.precio ?? this.product()?.precio,
|
||||
);
|
||||
protected readonly quantity = signal(1);
|
||||
protected readonly effectiveAvailability = computed(() => {
|
||||
const prod = this.product();
|
||||
const variant = this.selectedVariant();
|
||||
if (!prod) return AVAILABLE_CATALOG_AVAILABILITY;
|
||||
|
||||
return combineCatalogAvailability(prod.availability, variant?.availability);
|
||||
});
|
||||
protected readonly selectedVariantMax = computed<number | null>(() => {
|
||||
const prod = this.product();
|
||||
const variant = this.selectedVariant();
|
||||
if (!prod) return 0;
|
||||
if (!variant && prod.variants.length > 0) return 0;
|
||||
|
||||
return maximumCatalogQuantity(this.effectiveAvailability());
|
||||
return variant
|
||||
? (variant.maximum_addable_quantity ?? null)
|
||||
: prod.variants.length === 0
|
||||
? (prod.maximum_addable_quantity ?? null)
|
||||
: 0;
|
||||
});
|
||||
protected readonly hasPurchasableSelection = computed(() => {
|
||||
protected readonly selectedVariantAvailable = computed(() => {
|
||||
const prod = this.product();
|
||||
if (!prod) return false;
|
||||
if (this.selectedVariantMax() === 0) return false;
|
||||
|
||||
return prod.variants.length === 0 || this.selectedVariant() !== null;
|
||||
const variant = this.selectedVariant();
|
||||
if (variant) return this.isVariantAvailable(variant);
|
||||
if (prod.purpose === 'entry') return false;
|
||||
if (prod.variants.length > 0) return false;
|
||||
|
||||
return this.selectedVariantMax() !== 0;
|
||||
});
|
||||
protected readonly canAddToCart = computed(
|
||||
() =>
|
||||
this.hasPurchasableSelection() &&
|
||||
allowsCatalogAction(this.effectiveAvailability(), 'add_to_cart'),
|
||||
);
|
||||
protected readonly canBuyNow = computed(
|
||||
() =>
|
||||
this.hasPurchasableSelection() &&
|
||||
allowsCatalogAction(this.effectiveAvailability(), 'buy_now'),
|
||||
);
|
||||
protected readonly restrictionMessage = computed(() =>
|
||||
primaryAvailabilityMessage(this.effectiveAvailability()),
|
||||
);
|
||||
protected readonly allows = allowsCatalogAction;
|
||||
protected readonly descriptionExpanded = signal(false);
|
||||
protected readonly descriptionMaxHeight = signal(0);
|
||||
protected readonly descriptionHasOverflow = signal(false);
|
||||
@@ -243,12 +224,8 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
|
||||
this.quantity.set(Math.max(1, maximum));
|
||||
}
|
||||
},
|
||||
error: (error: HttpErrorResponse) => {
|
||||
if (error.status === 404) {
|
||||
this.product.set(null);
|
||||
this.selectedVariant.set(null);
|
||||
this.error.set('Este producto ya no está disponible.');
|
||||
}
|
||||
error: () => {
|
||||
// Keep the last known availability if the silent refresh fails.
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -318,10 +295,8 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
|
||||
protected addToCart(): void {
|
||||
const currentProduct = this.product();
|
||||
const variant = this.selectedVariant();
|
||||
if (!currentProduct || !this.canAddToCart()) {
|
||||
this.toastService.danger(
|
||||
this.effectiveAvailability().reasons[0]?.message ?? 'Por favor, selecciona una variante.',
|
||||
);
|
||||
if (!currentProduct || !this.selectedVariantAvailable()) {
|
||||
this.toastService.danger('Por favor, selecciona una variante.');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -351,10 +326,8 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!currentProduct || !this.canBuyNow()) {
|
||||
this.toastService.danger(
|
||||
this.effectiveAvailability().reasons[0]?.message ?? 'Por favor, selecciona una variante.',
|
||||
);
|
||||
if (!currentProduct || !this.selectedVariantAvailable()) {
|
||||
this.toastService.danger('Por favor, selecciona una variante.');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -400,6 +373,10 @@ export class ProductDetailPageComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
private isVariantAvailable(variant: CatalogItemVariant): boolean {
|
||||
return variant.maximum_addable_quantity !== 0;
|
||||
}
|
||||
|
||||
protected toggleDescription(): void {
|
||||
this.descriptionExpanded.update((current) => !current);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { CatalogItemDetail } from '../../../../core/services/catalog/catalog.interface';
|
||||
import { CatalogService } from '../../../../core/services/catalog/catalog.service';
|
||||
import { createCatalogAvailability } from '../../../../core/services/catalog/catalog-availability';
|
||||
import {
|
||||
PRODUCT_DETAIL_ERROR_MESSAGE,
|
||||
PRODUCT_DETAIL_INVALID_ID_MESSAGE,
|
||||
@@ -30,7 +29,7 @@ describe('productDetailResolver', () => {
|
||||
has_tickets: false,
|
||||
minimum_use_date: null,
|
||||
maximum_use_date: null,
|
||||
availability: createCatalogAvailability(0),
|
||||
maximum_addable_quantity: 0,
|
||||
attributes: [],
|
||||
variants: [],
|
||||
};
|
||||
|
||||
@@ -38,11 +38,13 @@
|
||||
<label class="visually-hidden" for="register-password">Contraseña</label>
|
||||
<app-input
|
||||
id="register-password"
|
||||
type="password"
|
||||
type="password-toggle"
|
||||
placeholder="Contraseña"
|
||||
[value]="form.controls.password.value"
|
||||
[invalid]="showControlError('password')"
|
||||
[visible]="passwordVisible()"
|
||||
(valueChange)="updateField('password', $event)"
|
||||
(visibleChange)="setPasswordVisibility($event)"
|
||||
/>
|
||||
@if (getControlError('password'); as errorMessage) {
|
||||
<small class="text-danger">{{ errorMessage }}</small>
|
||||
@@ -51,11 +53,13 @@
|
||||
<label class="visually-hidden" for="register-password-repeat">Repetir Contraseña</label>
|
||||
<app-input
|
||||
id="register-password-repeat"
|
||||
type="password"
|
||||
type="password-toggle"
|
||||
placeholder="Repetir Contraseña"
|
||||
[value]="form.controls.password_confirmation.value"
|
||||
[invalid]="showControlError('password_confirmation')"
|
||||
[visible]="passwordVisible()"
|
||||
(valueChange)="updateField('password_confirmation', $event)"
|
||||
(visibleChange)="setPasswordVisibility($event)"
|
||||
/>
|
||||
@if (getControlError('password_confirmation'); as errorMessage) {
|
||||
<small class="text-danger">{{ errorMessage }}</small>
|
||||
|
||||
@@ -12,6 +12,48 @@ describe('RegisterPageComponent', () => {
|
||||
TestBed.resetTestingModule();
|
||||
});
|
||||
|
||||
it('shows and hides both password fields with either visibility control', async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [RegisterPageComponent],
|
||||
providers: [
|
||||
provideRouter([]),
|
||||
{ provide: AuthService, useValue: { register: vi.fn() } },
|
||||
{ provide: ModalService, useValue: { openSimple: vi.fn() } },
|
||||
{ provide: ToastService, useValue: { danger: vi.fn() } }
|
||||
]
|
||||
}).compileComponents();
|
||||
|
||||
const fixture = TestBed.createComponent(RegisterPageComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
const getPasswordInputs = () =>
|
||||
Array.from(
|
||||
fixture.nativeElement.querySelectorAll(
|
||||
'input#register-password, input#register-password-repeat'
|
||||
)
|
||||
) as HTMLInputElement[];
|
||||
const getVisibilityButtons = () =>
|
||||
Array.from(
|
||||
fixture.nativeElement.querySelectorAll('button[aria-label]')
|
||||
) as HTMLButtonElement[];
|
||||
|
||||
expect(getPasswordInputs().map((input) => input.type)).toEqual(['password', 'password']);
|
||||
|
||||
getVisibilityButtons()[0].click();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getPasswordInputs().map((input) => input.type)).toEqual(['text', 'text']);
|
||||
expect(getVisibilityButtons().map((button) => button.getAttribute('aria-label'))).toEqual([
|
||||
'Ocultar contraseña',
|
||||
'Ocultar contraseña'
|
||||
]);
|
||||
|
||||
getVisibilityButtons()[1].click();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getPasswordInputs().map((input) => input.type)).toEqual(['password', 'password']);
|
||||
});
|
||||
|
||||
it('submits registration data and redirects to /login on success', async () => {
|
||||
const authService = {
|
||||
register: vi.fn().mockReturnValue(
|
||||
|
||||
@@ -48,6 +48,7 @@ export class RegisterPageComponent {
|
||||
private readonly submittedState = signal(false);
|
||||
private readonly serverErrorState = signal<string | null>(null);
|
||||
private readonly isSubmittingState = signal(false);
|
||||
private readonly passwordVisibleState = signal(false);
|
||||
|
||||
protected readonly form = this.formBuilder.nonNullable.group({
|
||||
nombre_apellido: ['', [Validators.required, Validators.maxLength(TEXT_MAX_LENGTH)]],
|
||||
@@ -67,6 +68,11 @@ export class RegisterPageComponent {
|
||||
protected readonly submitted = this.submittedState.asReadonly();
|
||||
protected readonly serverError = this.serverErrorState.asReadonly();
|
||||
protected readonly isSubmitting = this.isSubmittingState.asReadonly();
|
||||
protected readonly passwordVisible = this.passwordVisibleState.asReadonly();
|
||||
|
||||
protected setPasswordVisibility(visible: boolean): void {
|
||||
this.passwordVisibleState.set(visible);
|
||||
}
|
||||
|
||||
goToLogin(): void {
|
||||
void this.router.navigate(['/login']);
|
||||
|
||||
@@ -13,11 +13,13 @@
|
||||
<label class="visually-hidden" for="reset-password-new">Nueva Contraseña</label>
|
||||
<app-input
|
||||
id="reset-password-new"
|
||||
type="password"
|
||||
type="password-toggle"
|
||||
placeholder="Nueva Contraseña"
|
||||
[value]="form.controls.password.value"
|
||||
[invalid]="showControlError('password')"
|
||||
[visible]="passwordVisible()"
|
||||
(valueChange)="updatePassword('password', $event)"
|
||||
(visibleChange)="setPasswordVisibility($event)"
|
||||
/>
|
||||
@if (getControlError('password'); as errorMessage) {
|
||||
<small class="text-danger">{{ errorMessage }}</small>
|
||||
@@ -30,11 +32,13 @@
|
||||
</label>
|
||||
<app-input
|
||||
id="reset-password-confirmation"
|
||||
type="password"
|
||||
type="password-toggle"
|
||||
placeholder="Repetir Nueva Contraseña"
|
||||
[value]="form.controls.password_confirmation.value"
|
||||
[invalid]="showControlError('password_confirmation')"
|
||||
[visible]="passwordVisible()"
|
||||
(valueChange)="updatePassword('password_confirmation', $event)"
|
||||
(visibleChange)="setPasswordVisibility($event)"
|
||||
/>
|
||||
@if (getControlError('password_confirmation'); as errorMessage) {
|
||||
<small class="text-danger">{{ errorMessage }}</small>
|
||||
|
||||
@@ -50,6 +50,43 @@ describe('ResetPasswordPageComponent', () => {
|
||||
];
|
||||
}
|
||||
|
||||
it('shows and hides both password fields with either visibility control', async () => {
|
||||
const modalService = {
|
||||
openSimple: vi.fn(),
|
||||
};
|
||||
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ResetPasswordPageComponent],
|
||||
providers: resetProviders(modalService),
|
||||
}).compileComponents();
|
||||
|
||||
const fixture = TestBed.createComponent(ResetPasswordPageComponent);
|
||||
fixture.detectChanges();
|
||||
|
||||
const getPasswordInputs = () =>
|
||||
Array.from(fixture.nativeElement.querySelectorAll('input')) as HTMLInputElement[];
|
||||
const getVisibilityButtons = () =>
|
||||
Array.from(
|
||||
fixture.nativeElement.querySelectorAll('button[aria-label]'),
|
||||
) as HTMLButtonElement[];
|
||||
|
||||
expect(getPasswordInputs().map((input) => input.type)).toEqual(['password', 'password']);
|
||||
|
||||
getVisibilityButtons()[0].click();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getPasswordInputs().map((input) => input.type)).toEqual(['text', 'text']);
|
||||
expect(getVisibilityButtons().map((button) => button.getAttribute('aria-label'))).toEqual([
|
||||
'Ocultar contraseña',
|
||||
'Ocultar contraseña',
|
||||
]);
|
||||
|
||||
getVisibilityButtons()[1].click();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(getPasswordInputs().map((input) => input.type)).toEqual(['password', 'password']);
|
||||
});
|
||||
|
||||
it('rejects passwords that do not match', async () => {
|
||||
const modalService = {
|
||||
openSimple: vi.fn(),
|
||||
|
||||
@@ -49,6 +49,7 @@ export class ResetPasswordPageComponent {
|
||||
private readonly submittedState = signal(false);
|
||||
private readonly isSubmittingState = signal(false);
|
||||
private readonly serverErrorState = signal<string | null>(null);
|
||||
private readonly passwordVisibleState = signal(false);
|
||||
|
||||
private readonly email = this.route.snapshot.queryParamMap.get('email') ?? '';
|
||||
private readonly code = this.route.snapshot.queryParamMap.get('code') ?? '';
|
||||
@@ -72,6 +73,11 @@ export class ResetPasswordPageComponent {
|
||||
protected readonly submitted = this.submittedState.asReadonly();
|
||||
protected readonly isSubmitting = this.isSubmittingState.asReadonly();
|
||||
protected readonly serverError = this.serverErrorState.asReadonly();
|
||||
protected readonly passwordVisible = this.passwordVisibleState.asReadonly();
|
||||
|
||||
protected setPasswordVisibility(visible: boolean): void {
|
||||
this.passwordVisibleState.set(visible);
|
||||
}
|
||||
|
||||
protected updatePassword(controlName: PasswordControlName, value: string | number): void {
|
||||
this.form.controls[controlName].setValue(String(value));
|
||||
|
||||
@@ -13,7 +13,6 @@ import {
|
||||
} from '../../../../core/services/catalog/catalog.interface';
|
||||
import { CatalogService } from '../../../../core/services/catalog/catalog.service';
|
||||
import { CatalogAvailabilityService } from '../../../../core/services/catalog/catalog-availability.service';
|
||||
import { createCatalogAvailability } from '../../../../core/services/catalog/catalog-availability';
|
||||
import { Tenant } from '../../../../core/services/tenant.interface';
|
||||
import { TenantService } from '../../../../core/services/tenant.service';
|
||||
import { ToastService } from '../../../../core/services/toast.service';
|
||||
@@ -84,7 +83,6 @@ const pageOneItems: CatalogFeaturedItem[] = [
|
||||
nombre: 'Auriculares Bluetooth',
|
||||
precio: '24999.00',
|
||||
image: '/catalog/auriculares.jpg',
|
||||
availability: createCatalogAvailability(null),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@@ -92,7 +90,6 @@ const pageOneItems: CatalogFeaturedItem[] = [
|
||||
nombre: 'Teclado Mecanico',
|
||||
precio: '18999.00',
|
||||
image: null,
|
||||
availability: createCatalogAvailability(null),
|
||||
},
|
||||
];
|
||||
|
||||
@@ -409,14 +406,7 @@ describe('StoreHomePageComponent', () => {
|
||||
|
||||
it('requests another page for the selected featured group', async () => {
|
||||
const pageTwoItems: CatalogFeaturedItem[] = [
|
||||
{
|
||||
id: 3,
|
||||
type: 'product',
|
||||
nombre: 'Mouse Gamer',
|
||||
precio: '15999.00',
|
||||
image: null,
|
||||
availability: createCatalogAvailability(null),
|
||||
},
|
||||
{ id: 3, type: 'product', nombre: 'Mouse Gamer', precio: '15999.00', image: null },
|
||||
];
|
||||
const catalogServiceStub = {
|
||||
getCatalog: vi.fn(),
|
||||
|
||||
@@ -12,7 +12,8 @@
|
||||
[title]="item.nombre"
|
||||
[description]="item.descripcion ?? ''"
|
||||
[price]="price(item)"
|
||||
[availability]="itemAvailability(item)"
|
||||
[maximumAddableQuantity]="item.maximum_addable_quantity ?? null"
|
||||
[unavailableMessage]="item.unavailable_message ?? null"
|
||||
[variants]="item.variants ?? []"
|
||||
[saving]="savingProductIds().has(item.id)"
|
||||
(buy)="emitRowBuy(item, $event)"
|
||||
@@ -24,7 +25,8 @@
|
||||
[title]="item.nombre"
|
||||
[description]="item.descripcion ?? ''"
|
||||
[price]="price(item)"
|
||||
[availability]="itemAvailability(item)"
|
||||
[maximumAddableQuantity]="item.maximum_addable_quantity ?? null"
|
||||
[unavailableMessage]="item.unavailable_message ?? null"
|
||||
[variants]="item.variants ?? []"
|
||||
[saving]="savingProductIds().has(item.id)"
|
||||
(buy)="emitColumnBuy(item, $event)"
|
||||
@@ -38,8 +40,8 @@
|
||||
[description]="item.descripcion ?? ''"
|
||||
[price]="price(item)"
|
||||
[imageUrl]="loadImages() ? (item.image ?? null) : null"
|
||||
[unavailableMessage]="availabilityMessage(item)"
|
||||
[disabled]="loading() || !allows(itemAvailability(item), 'buy_now')"
|
||||
[unavailableMessage]="item.unavailable_message ?? null"
|
||||
[disabled]="loading() || !!item.unavailable_message"
|
||||
(buy)="emitTicketBuy(item, $event)"
|
||||
/>
|
||||
}
|
||||
@@ -48,7 +50,7 @@
|
||||
[imageUrl]="loadImages() ? (item.image ?? null) : null"
|
||||
[title]="item.nombre"
|
||||
[originalPrice]="price(item)"
|
||||
[unavailableMessage]="availabilityMessage(item)"
|
||||
[unavailableMessage]="item.unavailable_message ?? null"
|
||||
[imagePriority]="loadImages() && index < 4"
|
||||
(buy)="emitProductDetailBuy(item)"
|
||||
/>
|
||||
|
||||
@@ -6,7 +6,6 @@ import { of } from 'rxjs';
|
||||
import { ApiPaginatedResponse } from '../../../core/services/api-paginated-response.interface';
|
||||
import { CartService } from '../../../core/services/cart/cart.service';
|
||||
import { CatalogService } from '../../../core/services/catalog/catalog.service';
|
||||
import { createCatalogAvailability } from '../../../core/services/catalog/catalog-availability';
|
||||
import {
|
||||
CatalogFeaturedItems,
|
||||
CatalogGroupLayout,
|
||||
@@ -24,7 +23,6 @@ describe('ProductListComponent', () => {
|
||||
descripcion: 'Primera descripcion',
|
||||
precio: '100.00',
|
||||
image: '/images/one.png',
|
||||
availability: createCatalogAvailability(null),
|
||||
variants: [],
|
||||
},
|
||||
{
|
||||
@@ -34,7 +32,6 @@ describe('ProductListComponent', () => {
|
||||
descripcion: 'Segunda descripcion',
|
||||
precio: 200,
|
||||
image: null,
|
||||
availability: createCatalogAvailability(null),
|
||||
variants: [],
|
||||
},
|
||||
];
|
||||
@@ -59,20 +56,6 @@ describe('ProductListComponent', () => {
|
||||
) {
|
||||
const getVariantOptions = vi.fn().mockReturnValue(
|
||||
of({
|
||||
variants: [
|
||||
{
|
||||
id: 401,
|
||||
precio: '10000.00',
|
||||
availability: createCatalogAvailability(1),
|
||||
values: { tipo: '1', sector: '2', fila: '3', asiento: '4' },
|
||||
},
|
||||
{
|
||||
id: 402,
|
||||
precio: '12000.00',
|
||||
availability: createCatalogAvailability(1),
|
||||
values: { tipo: '1', sector: '2', fila: '3', asiento: '5' },
|
||||
},
|
||||
],
|
||||
selectors: ['tipo', 'sector', 'fila', 'asiento'].map((key, index) => ({
|
||||
key,
|
||||
label: key,
|
||||
@@ -90,12 +73,7 @@ describe('ProductListComponent', () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ProductListComponent],
|
||||
providers: [
|
||||
{
|
||||
provide: CatalogService,
|
||||
useValue: {
|
||||
withoutLoading: () => ({ getVariantOptions }),
|
||||
},
|
||||
},
|
||||
{ provide: CatalogService, useValue: { getVariantOptions } },
|
||||
{ provide: CartService, useValue: {} },
|
||||
],
|
||||
}).compileComponents();
|
||||
@@ -215,8 +193,8 @@ describe('ProductListComponent', () => {
|
||||
const itemWithVariants: ProductListItem = {
|
||||
...items[0],
|
||||
variants: [
|
||||
{ id: 91, availability: createCatalogAvailability(3), values: { fecha: '10 de octubre' } },
|
||||
{ id: 92, availability: createCatalogAvailability(4), values: { fecha: '11 de octubre' } },
|
||||
{ id: 91, maximum_addable_quantity: 3, values: { fecha: '10 de octubre' } },
|
||||
{ id: 92, maximum_addable_quantity: 4, values: { fecha: '11 de octubre' } },
|
||||
],
|
||||
};
|
||||
const fixture = await render('column_with_cart', [itemWithVariants]);
|
||||
@@ -242,7 +220,7 @@ describe('ProductListComponent', () => {
|
||||
variants: [
|
||||
{
|
||||
id: 91,
|
||||
availability: createCatalogAvailability(2),
|
||||
maximum_addable_quantity: 2,
|
||||
values: { fecha: '10 de octubre' },
|
||||
},
|
||||
],
|
||||
@@ -270,7 +248,7 @@ describe('ProductListComponent', () => {
|
||||
variants: [
|
||||
{
|
||||
id: 91,
|
||||
availability: createCatalogAvailability(0),
|
||||
maximum_addable_quantity: 0,
|
||||
values: { fecha: '10 de octubre' },
|
||||
},
|
||||
],
|
||||
@@ -326,7 +304,7 @@ describe('ProductListComponent', () => {
|
||||
{
|
||||
id: 401,
|
||||
precio: '10000.00',
|
||||
availability: createCatalogAvailability(1),
|
||||
maximum_addable_quantity: 1,
|
||||
values: {
|
||||
tipo: { value: 'vip', label: 'VIP' },
|
||||
sector: { value: 'a', label: 'Sector A' },
|
||||
@@ -337,7 +315,7 @@ describe('ProductListComponent', () => {
|
||||
{
|
||||
id: 402,
|
||||
precio: '12000.00',
|
||||
availability: createCatalogAvailability(1),
|
||||
maximum_addable_quantity: 1,
|
||||
values: {
|
||||
tipo: { value: 'vip', label: 'VIP' },
|
||||
sector: { value: 'a', label: 'Sector A' },
|
||||
|
||||
@@ -18,11 +18,6 @@ import {
|
||||
CatalogGroupLayout,
|
||||
CatalogProductLayout,
|
||||
} from '../../../core/services/catalog/catalog.interface';
|
||||
import {
|
||||
AVAILABLE_CATALOG_AVAILABILITY,
|
||||
allowsCatalogAction,
|
||||
primaryAvailabilityMessage,
|
||||
} from '../../../core/services/catalog/catalog-availability';
|
||||
import { CarouselComponent } from '../carousel/carousel.component';
|
||||
import { PaginatorComponent } from '../paginator/paginator.component';
|
||||
import { ProductColumnWithImageComponent } from '../product-column-with-image/product-column-with-image.component';
|
||||
@@ -79,7 +74,6 @@ export class ProductListComponent {
|
||||
readonly buy = output<ProductListBuyEvent>();
|
||||
readonly addToCart = output<ProductListCartEvent>();
|
||||
readonly pageChange = output<number>();
|
||||
protected readonly allows = allowsCatalogAction;
|
||||
|
||||
protected readonly effectiveLayout = computed<ProductListLayout>(() =>
|
||||
this.mobile() && this.layout() === 'row' ? 'column_with_cart' : this.layout(),
|
||||
@@ -114,14 +108,6 @@ export class ProductListComponent {
|
||||
return Number.isFinite(price) ? price : 0;
|
||||
}
|
||||
|
||||
protected availabilityMessage(item: ProductListItem): string | null {
|
||||
return primaryAvailabilityMessage(this.itemAvailability(item));
|
||||
}
|
||||
|
||||
protected itemAvailability(item: ProductListItem) {
|
||||
return item.availability ?? AVAILABLE_CATALOG_AVAILABILITY;
|
||||
}
|
||||
|
||||
protected emitRowCart(
|
||||
product: ProductListItem,
|
||||
event: { quantity: number; variant: unknown },
|
||||
|
||||
@@ -21,14 +21,13 @@
|
||||
<app-variant-selector
|
||||
class="product-row-card__selectors"
|
||||
[variants]="variants()"
|
||||
[disabled]="!allows(availability(), 'select_variant')"
|
||||
[(selectedVariant)]="selectedVariant"
|
||||
/>
|
||||
|
||||
<app-quantity-selector
|
||||
[(quantity)]="quantity"
|
||||
[max]="effectiveMaximum()"
|
||||
[disabled]="!allows(effectiveAvailability(), 'change_quantity')"
|
||||
[disabled]="unavailable()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -39,22 +38,14 @@
|
||||
|
||||
<div class="product-row-card__buttons">
|
||||
<div class="product-row-card__btn-wrapper">
|
||||
<app-button
|
||||
variant="primary"
|
||||
[disabled]="!hasPurchasableSelection() || !allows(effectiveAvailability(), 'buy_now')"
|
||||
(click)="onBuy()"
|
||||
>
|
||||
<app-button variant="primary" [disabled]="unavailable()" (click)="onBuy()">
|
||||
Comprar
|
||||
</app-button>
|
||||
</div>
|
||||
<div class="product-row-card__btn-wrapper">
|
||||
<app-button
|
||||
variant="secondary"
|
||||
[disabled]="
|
||||
saving() ||
|
||||
!hasPurchasableSelection() ||
|
||||
!allows(effectiveAvailability(), 'add_to_cart')
|
||||
"
|
||||
[disabled]="saving() || unavailable()"
|
||||
(click)="onAddToCart()"
|
||||
>
|
||||
{{ saving() ? 'Guardando' : 'Agregar al carrito' }}
|
||||
|
||||
@@ -14,20 +14,13 @@ import {
|
||||
VariantSelectorComponent,
|
||||
VariantSelectorVariant,
|
||||
} from '../variant-selector/variant-selector.component';
|
||||
import { CatalogAvailability } from '../../../core/services/catalog/catalog.interface';
|
||||
import {
|
||||
AVAILABLE_CATALOG_AVAILABILITY,
|
||||
allowsCatalogAction,
|
||||
combineCatalogAvailability,
|
||||
maximumCatalogQuantity,
|
||||
primaryAvailabilityMessage,
|
||||
} from '../../../core/services/catalog/catalog-availability';
|
||||
|
||||
export interface Variant extends VariantSelectorVariant {
|
||||
label?: string;
|
||||
descripcion?: string | null;
|
||||
precio?: string | number;
|
||||
availability?: CatalogAvailability;
|
||||
maximum_addable_quantity?: number | null;
|
||||
unavailable_message?: string | null;
|
||||
}
|
||||
|
||||
@Component({
|
||||
@@ -43,7 +36,8 @@ export class ProductRowCardComponent {
|
||||
readonly title = input<string>('');
|
||||
readonly description = input<string>('');
|
||||
readonly price = input<number>(0);
|
||||
readonly availability = input<CatalogAvailability>(AVAILABLE_CATALOG_AVAILABILITY);
|
||||
readonly maximumAddableQuantity = input<number | null>(null);
|
||||
readonly unavailableMessage = input<string | null>(null);
|
||||
readonly variants = input<Variant[]>([]);
|
||||
readonly saving = input(false);
|
||||
|
||||
@@ -66,22 +60,19 @@ export class ProductRowCardComponent {
|
||||
|
||||
return Number.isFinite(variantPrice) ? variantPrice : this.price();
|
||||
});
|
||||
protected readonly effectiveAvailability = computed(() =>
|
||||
combineCatalogAvailability(this.availability(), this.selectedVariantData()?.availability),
|
||||
);
|
||||
protected readonly hasVariants = computed(() => this.variants().length > 0);
|
||||
protected readonly hasPurchasableSelection = computed(
|
||||
() => !this.hasVariants() || this.selectedVariantData() !== undefined,
|
||||
);
|
||||
protected readonly effectiveMaximum = computed(() =>
|
||||
maximumCatalogQuantity(this.effectiveAvailability()),
|
||||
);
|
||||
protected readonly effectiveUnavailableMessage = computed(() =>
|
||||
primaryAvailabilityMessage(this.effectiveAvailability()),
|
||||
protected readonly effectiveMaximum = computed(
|
||||
() => this.selectedVariantData()?.maximum_addable_quantity ?? this.maximumAddableQuantity(),
|
||||
);
|
||||
protected readonly unavailable = computed(() => this.effectiveMaximum() === 0);
|
||||
protected readonly effectiveUnavailableMessage = computed(() => {
|
||||
const selectedVariant = this.selectedVariantData();
|
||||
|
||||
return selectedVariant
|
||||
? (selectedVariant.unavailable_message ?? null)
|
||||
: this.unavailableMessage();
|
||||
});
|
||||
|
||||
readonly formattedPrice = computed(() => this.formatCurrency(this.effectivePrice()));
|
||||
protected readonly allows = allowsCatalogAction;
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
@@ -94,11 +85,7 @@ export class ProductRowCardComponent {
|
||||
}
|
||||
|
||||
protected onAddToCart(): void {
|
||||
if (
|
||||
this.saving() ||
|
||||
!this.hasPurchasableSelection() ||
|
||||
!this.allows(this.effectiveAvailability(), 'add_to_cart')
|
||||
) {
|
||||
if (this.saving() || this.unavailable()) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -109,8 +96,7 @@ export class ProductRowCardComponent {
|
||||
}
|
||||
|
||||
protected onBuy(): void {
|
||||
if (!this.hasPurchasableSelection() || !this.allows(this.effectiveAvailability(), 'buy_now'))
|
||||
return;
|
||||
if (this.unavailable()) return;
|
||||
|
||||
this.buy.emit({
|
||||
quantity: this.quantity(),
|
||||
|
||||
@@ -23,10 +23,6 @@ import {
|
||||
CatalogVariantSelector,
|
||||
CatalogVariantValue,
|
||||
} from '../../../core/services/catalog/catalog.interface';
|
||||
import {
|
||||
allowsCatalogAction,
|
||||
createCatalogAvailability,
|
||||
} from '../../../core/services/catalog/catalog-availability';
|
||||
import { CatalogService } from '../../../core/services/catalog/catalog.service';
|
||||
import { ModalService } from '../../../core/services/modal.service';
|
||||
import { ToastService } from '../../../core/services/toast.service';
|
||||
@@ -357,11 +353,7 @@ export class ProductTicketSelectorComponent {
|
||||
if (reservedVariant !== null && !variants.some(({ id }) => id === reservedVariant.id)) {
|
||||
variants.push(reservedVariant);
|
||||
}
|
||||
return variants.filter(
|
||||
({ id, availability }) =>
|
||||
(availability === undefined || allowsCatalogAction(availability, 'select_variant')) &&
|
||||
!reservedByOtherRows.has(id),
|
||||
);
|
||||
return variants.filter(({ id }) => !reservedByOtherRows.has(id));
|
||||
}
|
||||
|
||||
private reservedVariantData(row: TicketSelectionRow): CatalogFeaturedItemVariant | null {
|
||||
@@ -371,9 +363,7 @@ export class ProductTicketSelectorComponent {
|
||||
return {
|
||||
id: item.variant.id,
|
||||
precio: item.variant.precio,
|
||||
availability: createCatalogAvailability(
|
||||
item.variant.stock_tecnico === null ? null : item.variant.stock_tecnico + item.cantidad,
|
||||
),
|
||||
maximum_addable_quantity: item.variant.stock_tecnico,
|
||||
values: item.variant.values,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<app-quantity-selector
|
||||
[(quantity)]="quantity"
|
||||
[max]="effectiveMaximum()"
|
||||
[disabled]="!allows(effectiveAvailability(), 'change_quantity')"
|
||||
[disabled]="unavailable()"
|
||||
/>
|
||||
</div>
|
||||
} @else {
|
||||
@@ -29,16 +29,12 @@
|
||||
<app-quantity-selector
|
||||
[(quantity)]="quantity"
|
||||
[max]="effectiveMaximum()"
|
||||
[disabled]="!allows(effectiveAvailability(), 'change_quantity')"
|
||||
[disabled]="unavailable()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="product-vertical-with-cart-card__variant-selectors">
|
||||
<app-variant-selector
|
||||
[variants]="variants()"
|
||||
[disabled]="!allows(availability(), 'select_variant')"
|
||||
[(selectedVariant)]="selectedVariant"
|
||||
/>
|
||||
<app-variant-selector [variants]="variants()" [(selectedVariant)]="selectedVariant" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -46,21 +42,14 @@
|
||||
<div class="product-vertical-with-cart-card__actions">
|
||||
<app-button
|
||||
variant="primary"
|
||||
[disabled]="
|
||||
!allows(effectiveAvailability(), 'buy_now') ||
|
||||
(hasVariants() && selectedVariant() === null)
|
||||
"
|
||||
[disabled]="unavailable() || (hasVariants() && selectedVariant() === null)"
|
||||
(click)="onBuy()"
|
||||
>
|
||||
Comprar
|
||||
</app-button>
|
||||
<app-button
|
||||
variant="secondary"
|
||||
[disabled]="
|
||||
saving() ||
|
||||
!allows(effectiveAvailability(), 'add_to_cart') ||
|
||||
(hasVariants() && selectedVariant() === null)
|
||||
"
|
||||
[disabled]="saving() || unavailable() || (hasVariants() && selectedVariant() === null)"
|
||||
(click)="onAddToCart()"
|
||||
>
|
||||
{{ saving() ? 'Guardando' : 'Agregar al carrito' }}
|
||||
|
||||
@@ -58,17 +58,11 @@ describe('ProductVerticalWithCartCardComponent', () => {
|
||||
|
||||
it('shows the backend availability message with the reusable tooltip', async () => {
|
||||
const fixture = await createComponent();
|
||||
fixture.componentRef.setInput('availability', {
|
||||
state: 'visible',
|
||||
maximum_quantity: 0,
|
||||
reasons: [
|
||||
{
|
||||
code: 'user_quota_reached',
|
||||
message: 'Alcanzaste el cupo máximo permitido para este producto.',
|
||||
},
|
||||
],
|
||||
allowed_actions: [],
|
||||
});
|
||||
fixture.componentRef.setInput('maximumAddableQuantity', 0);
|
||||
fixture.componentRef.setInput(
|
||||
'unavailableMessage',
|
||||
'Alcanzaste el cupo máximo permitido para este producto.',
|
||||
);
|
||||
fixture.detectChanges();
|
||||
|
||||
const tooltip = (fixture.nativeElement as HTMLElement).querySelector('app-tooltip');
|
||||
|
||||
@@ -15,19 +15,12 @@ import {
|
||||
VariantSelectorComponent,
|
||||
VariantSelectorVariant,
|
||||
} from '../variant-selector/variant-selector.component';
|
||||
import { CatalogAvailability } from '../../../core/services/catalog/catalog.interface';
|
||||
import {
|
||||
AVAILABLE_CATALOG_AVAILABILITY,
|
||||
allowsCatalogAction,
|
||||
combineCatalogAvailability,
|
||||
maximumCatalogQuantity,
|
||||
primaryAvailabilityMessage,
|
||||
} from '../../../core/services/catalog/catalog-availability';
|
||||
|
||||
export interface VerticalCartVariant extends VariantSelectorVariant {
|
||||
descripcion?: string | null;
|
||||
precio?: string | number;
|
||||
availability?: CatalogAvailability;
|
||||
maximum_addable_quantity?: number | null;
|
||||
unavailable_message?: string | null;
|
||||
}
|
||||
|
||||
@Component({
|
||||
@@ -41,7 +34,8 @@ export class ProductVerticalWithCartCardComponent {
|
||||
readonly title = input<string>('');
|
||||
readonly description = input<string>('');
|
||||
readonly price = input<number>(0);
|
||||
readonly availability = input<CatalogAvailability>(AVAILABLE_CATALOG_AVAILABILITY);
|
||||
readonly maximumAddableQuantity = input<number | null>(null);
|
||||
readonly unavailableMessage = input<string | null>(null);
|
||||
readonly variants = input<VerticalCartVariant[]>([]);
|
||||
readonly saving = input(false);
|
||||
|
||||
@@ -64,16 +58,17 @@ export class ProductVerticalWithCartCardComponent {
|
||||
});
|
||||
protected readonly formattedPrice = computed(() => this.formatCurrency(this.effectivePrice()));
|
||||
protected readonly hasVariants = computed(() => this.variants().length > 0);
|
||||
protected readonly effectiveAvailability = computed(() =>
|
||||
combineCatalogAvailability(this.availability(), this.selectedVariantData()?.availability),
|
||||
protected readonly effectiveMaximum = computed(
|
||||
() => this.selectedVariantData()?.maximum_addable_quantity ?? this.maximumAddableQuantity(),
|
||||
);
|
||||
protected readonly effectiveMaximum = computed(() =>
|
||||
maximumCatalogQuantity(this.effectiveAvailability()),
|
||||
);
|
||||
protected readonly effectiveUnavailableMessage = computed(() =>
|
||||
primaryAvailabilityMessage(this.effectiveAvailability()),
|
||||
);
|
||||
protected readonly allows = allowsCatalogAction;
|
||||
protected readonly unavailable = computed(() => this.effectiveMaximum() === 0);
|
||||
protected readonly effectiveUnavailableMessage = computed(() => {
|
||||
const selectedVariant = this.selectedVariantData();
|
||||
|
||||
return selectedVariant
|
||||
? (selectedVariant.unavailable_message ?? null)
|
||||
: this.unavailableMessage();
|
||||
});
|
||||
|
||||
constructor() {
|
||||
effect(() => {
|
||||
@@ -86,7 +81,7 @@ export class ProductVerticalWithCartCardComponent {
|
||||
}
|
||||
|
||||
protected onAddToCart(): void {
|
||||
if (this.saving() || !this.allows(this.effectiveAvailability(), 'add_to_cart')) {
|
||||
if (this.saving() || this.unavailable()) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -94,7 +89,7 @@ export class ProductVerticalWithCartCardComponent {
|
||||
}
|
||||
|
||||
protected onBuy(): void {
|
||||
if (!this.allows(this.effectiveAvailability(), 'buy_now')) return;
|
||||
if (this.unavailable()) return;
|
||||
|
||||
this.buy.emit({ quantity: this.quantity(), variant: this.selectedVariant() });
|
||||
}
|
||||
|
||||
@@ -62,8 +62,6 @@ describe('VariantSelectorComponent', () => {
|
||||
]);
|
||||
fixture.componentRef.setInput('selectedVariant', 2);
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
|
||||
const selects = Array.from(
|
||||
fixture.nativeElement.querySelectorAll('select'),
|
||||
@@ -82,28 +80,6 @@ describe('VariantSelectorComponent', () => {
|
||||
expect(fixture.componentInstance.selectedVariant()).toBe(1);
|
||||
});
|
||||
|
||||
it('does not offer variants whose availability forbids selection', async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [VariantSelectorComponent],
|
||||
}).compileComponents();
|
||||
const fixture = TestBed.createComponent(VariantSelectorComponent);
|
||||
fixture.componentRef.setInput('variants', [
|
||||
{ id: 1, values: { talle: 'S' } },
|
||||
{
|
||||
id: 2,
|
||||
values: { talle: 'M' },
|
||||
availability: { state: 'visible', maximum_quantity: 0, allowed_actions: [], reasons: [] },
|
||||
},
|
||||
]);
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.nativeElement.textContent).toContain('S');
|
||||
expect(fixture.nativeElement.textContent).not.toContain('M');
|
||||
expect(fixture.componentInstance.selectedVariant()).toBe(1);
|
||||
});
|
||||
|
||||
it('requires manual selections when autoSelectFirst is disabled', async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [VariantSelectorComponent],
|
||||
|
||||
@@ -10,8 +10,6 @@ import {
|
||||
untracked,
|
||||
} from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CatalogAvailability } from '../../../core/services/catalog/catalog.interface';
|
||||
import { allowsCatalogAction } from '../../../core/services/catalog/catalog-availability';
|
||||
|
||||
export interface VariantAttributeOption {
|
||||
value: string;
|
||||
@@ -24,7 +22,6 @@ export type VariantAttributeValue = VariantAttributeScalar | VariantAttributeSca
|
||||
export interface VariantSelectorVariant {
|
||||
id: unknown;
|
||||
values: Record<string, VariantAttributeValue>;
|
||||
availability?: CatalogAvailability;
|
||||
}
|
||||
|
||||
export interface VariantSelectorSelectionChange {
|
||||
@@ -67,12 +64,10 @@ export class VariantSelectorComponent {
|
||||
right: VariantAttributeValue | null,
|
||||
): boolean => left !== null && right !== null && this.sameValue(left, right);
|
||||
protected readonly attributeKeys = computed(() =>
|
||||
Array.from(
|
||||
new Set(this.getSelectableVariants().flatMap((variant) => Object.keys(variant.values))),
|
||||
),
|
||||
Array.from(new Set(this.variants().flatMap((variant) => Object.keys(variant.values)))),
|
||||
);
|
||||
protected readonly selectors = computed<VariantSelectorGroup[]>(() => {
|
||||
const variants = this.getSelectableVariants();
|
||||
const variants = this.variants();
|
||||
const keys = this.attributeKeys();
|
||||
const selectedValues = this.selectedValues();
|
||||
|
||||
@@ -115,7 +110,7 @@ export class VariantSelectorComponent {
|
||||
});
|
||||
|
||||
effect(() => {
|
||||
const variants = this.getSelectableVariants();
|
||||
const variants = this.variants();
|
||||
const selectedVariant = this.selectedVariant();
|
||||
const autoSelectFirst = this.autoSelectFirst();
|
||||
|
||||
@@ -144,7 +139,7 @@ export class VariantSelectorComponent {
|
||||
}
|
||||
|
||||
protected onValueChange(key: string, value: VariantAttributeValue | null): void {
|
||||
const variants = this.getSelectableVariants();
|
||||
const variants = this.variants();
|
||||
const keys = this.attributeKeys();
|
||||
const changedIndex = keys.indexOf(key);
|
||||
const values = { ...this.selectedValues() };
|
||||
@@ -203,14 +198,6 @@ export class VariantSelectorComponent {
|
||||
return Array.from(options.values());
|
||||
}
|
||||
|
||||
private getSelectableVariants(): VariantSelectorVariant[] {
|
||||
return this.variants().filter(
|
||||
(variant) =>
|
||||
variant.availability === undefined ||
|
||||
allowsCatalogAction(variant.availability, 'select_variant'),
|
||||
);
|
||||
}
|
||||
|
||||
private reconcileManualSelection(
|
||||
selectedValues: Record<string, VariantAttributeValue>,
|
||||
variants: VariantSelectorVariant[],
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export const environment = {
|
||||
production: false,
|
||||
production: true,
|
||||
nombre:"Homologación - activo",
|
||||
url:"https://backend.qa.shopit.com.ar/api/",
|
||||
urlDescarga:"url/"
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<title>ShopitFront</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
|
||||
Reference in New Issue
Block a user