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

feat(catalog): show product availability tooltips

Browse Source
This commit is contained in:
ncoronel
2026-08-21 16:47:29 -03:00
parent d51db00247
commit 8089298383
11 changed files with 89 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/core/services/catalog/catalog.interface.ts
View File

@@ -67,6 +67,7 @@ export interface CatalogItemVariant {
event_date_ids?: number[];
event_dates?: string[];
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;
@@ -114,6 +115,7 @@ export interface CatalogFeaturedItemVariant {
descripcion?: string | null;
precio?: string;
maximum_addable_quantity?: number | null;
unavailable_message?: string | null;
values: Record<string, CatalogVariantValue>;
}
@@ -146,6 +148,7 @@ export interface CatalogFeaturedItem {
precio: number | string;
image?: string | null;
maximum_addable_quantity?: number | null;
unavailable_message?: string | null;
variants?: CatalogFeaturedItemVariant[];
}

18
src/app/shared/components/product-column-with-image/product-column-with-image.component.html
View File

@@ -31,9 +31,16 @@
<div
class="product-column-with-image__body p-3 d-flex flex-column align-items-center text-center flex-grow-1"
>
<h3 class="product-column-with-image__title text-uppercase text-black mb-4">{{ title() }}</h3>
<h3 class="product-column-with-image__title text-uppercase text-black mb-4">
{{ title() }}
@if (unavailableMessage(); as message) {
<app-tooltip [message]="message" />
}
</h3>
<div class="product-column-with-image__prices d-flex align-items-center justify-content-center gap-2">
<div
class="product-column-with-image__prices d-flex align-items-center justify-content-center gap-2"
>
<span class="product-column-with-image__price-discounted text-primary">
{{ formattedDiscountedPrice() }}
</span>
@@ -53,7 +60,12 @@
</div>
<div class="product-column-with-image__action mt-auto w-100">
<app-button variant="primary" class="w-100" (click)="buy.emit()">
<app-button
variant="primary"
class="w-100"
[disabled]="!!unavailableMessage()"
(click)="onBuy()"
>
{{ buttonText() }}
</app-button>
</div>

10
src/app/shared/components/product-column-with-image/product-column-with-image.component.ts
View File

@@ -2,10 +2,11 @@ import { NgOptimizedImage } from '@angular/common';
import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
import { ButtonComponent } from '../button/button.component';
import { TooltipComponent } from '../tooltip/tooltip.component';
@Component({
selector: 'app-product-column-with-image',
imports: [ButtonComponent, NgOptimizedImage],
imports: [ButtonComponent, NgOptimizedImage, TooltipComponent],
templateUrl: './product-column-with-image.component.html',
styleUrl: './product-column-with-image.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -18,9 +19,16 @@ export class ProductColumnWithImageComponent {
readonly transferPrice = input<number | null>(null);
readonly buttonText = input<string>('Comprar');
readonly imagePriority = input<boolean>(false);
readonly unavailableMessage = input<string | null>(null);
readonly buy = output<void>();
protected onBuy(): void {
if (this.unavailableMessage()) return;
this.buy.emit();
}
readonly discountedPrice = computed(() => {
const original = this.originalPrice();
const discount = this.discount();

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

@@ -13,6 +13,7 @@
[description]="item.descripcion ?? ''"
[price]="price(item)"
[maximumAddableQuantity]="item.maximum_addable_quantity ?? null"
[unavailableMessage]="item.unavailable_message ?? null"
[variants]="item.variants ?? []"
[saving]="savingProductIds().has(item.id)"
(buy)="emitRowBuy(item, $event)"
@@ -25,6 +26,7 @@
[description]="item.descripcion ?? ''"
[price]="price(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,7 +40,8 @@
[description]="item.descripcion ?? ''"
[price]="price(item)"
[imageUrl]="loadImages() ? (item.image ?? null) : null"
[disabled]="loading()"
[unavailableMessage]="item.unavailable_message ?? null"
[disabled]="loading() || !!item.unavailable_message"
(buy)="emitTicketBuy(item, $event)"
/>
}
@@ -47,6 +50,7 @@
[imageUrl]="loadImages() ? (item.image ?? null) : null"
[title]="item.nombre"
[originalPrice]="price(item)"
[unavailableMessage]="item.unavailable_message ?? null"
[imagePriority]="loadImages() && index < 4"
(buy)="emitProductDetailBuy(item)"
/>

3
src/app/shared/components/product-row-card/product-row-card.component.html
View File

@@ -3,6 +3,9 @@
<div class="product-row-card__info d-flex flex-column justify-content-center flex-grow-1">
<h3 class="product-row-card__title text-uppercase mb-1 m-0">
{{ title() }}
@if (effectiveUnavailableMessage(); as message) {
<app-tooltip [message]="message" />
}
</h3>
@if (effectiveDescription()) {
<p class="product-row-card__description m-0 mt-1">

12
src/app/shared/components/product-row-card/product-row-card.component.ts
View File

@@ -9,6 +9,7 @@ import {
} from '@angular/core';
import { ButtonComponent } from '../button/button.component';
import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
import { TooltipComponent } from '../tooltip/tooltip.component';
import {
VariantSelectorComponent,
VariantSelectorVariant,
@@ -19,12 +20,13 @@ export interface Variant extends VariantSelectorVariant {
descripcion?: string | null;
precio?: string | number;
maximum_addable_quantity?: number | null;
unavailable_message?: string | null;
}
@Component({
selector: 'app-product-row-card',
standalone: true,
imports: [ButtonComponent, QuantitySelectorComponent, VariantSelectorComponent],
imports: [ButtonComponent, QuantitySelectorComponent, TooltipComponent, VariantSelectorComponent],
templateUrl: './product-row-card.component.html',
styleUrl: './product-row-card.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -35,6 +37,7 @@ export class ProductRowCardComponent {
readonly description = input<string>('');
readonly price = input<number>(0);
readonly maximumAddableQuantity = input<number | null>(null);
readonly unavailableMessage = input<string | null>(null);
readonly variants = input<Variant[]>([]);
readonly saving = input(false);
@@ -61,6 +64,13 @@ export class ProductRowCardComponent {
() => 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()));

7
src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html
View File

@@ -1,7 +1,12 @@
<article class="ticket-selector">
<header class="ticket-selector__header">
<div>
<h3 class="ticket-selector__title">{{ title() }}</h3>
<h3 class="ticket-selector__title">
{{ title() }}
@if (unavailableMessage(); as message) {
<app-tooltip [message]="message" />
}
</h3>
@if (description()) {
<p class="ticket-selector__description">{{ description() }}</p>
}

4
src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts
View File

@@ -28,6 +28,7 @@ import { ModalService } from '../../../core/services/modal.service';
import { ToastService } from '../../../core/services/toast.service';
import { ButtonComponent } from '../button/button.component';
import { IconButtonComponent } from '../icon-button/icon-button.component';
import { TooltipComponent } from '../tooltip/tooltip.component';
type TicketSelectionStatus =
| 'selecting'
@@ -56,7 +57,7 @@ interface TicketSelectionRow {
@Component({
selector: 'app-product-ticket-selector',
imports: [ButtonComponent, IconButtonComponent],
imports: [ButtonComponent, IconButtonComponent, TooltipComponent],
templateUrl: './product-ticket-selector.component.html',
styleUrl: './product-ticket-selector.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -80,6 +81,7 @@ export class ProductTicketSelectorComponent {
readonly price = input<number>(0);
readonly imageUrl = input<string | null>(null);
readonly disabled = input(false);
readonly unavailableMessage = input<string | null>(null);
readonly buy = output<number[]>();

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

@@ -1,6 +1,11 @@
<article class="product-vertical-with-cart-card">
<div class="product-vertical-with-cart-card__content">
<h3 class="product-vertical-with-cart-card__title">{{ title() }}</h3>
<h3 class="product-vertical-with-cart-card__title">
{{ title() }}
@if (effectiveUnavailableMessage(); as message) {
<app-tooltip [message]="message" />
}
</h3>
@if (effectiveDescription()) {
<p class="product-vertical-with-cart-card__description">{{ effectiveDescription() }}</p>

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

@@ -56,6 +56,23 @@ describe('ProductVerticalWithCartCardComponent', () => {
).toBeNull();
});
it('shows the backend availability message with the reusable tooltip', async () => {
const fixture = await createComponent();
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');
expect(tooltip?.querySelector('i.fa-solid.fa-circle-info')).not.toBeNull();
expect(tooltip?.textContent).toContain(
'Alcanzaste el cupo máximo permitido para este producto.',
);
});
it('updates the quantity with the reusable quantity selector', async () => {
const fixture = await createComponent();
const buttons = fixture.nativeElement.querySelectorAll(

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

@@ -10,6 +10,7 @@ import {
import { ButtonComponent } from '../button/button.component';
import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';
import { TooltipComponent } from '../tooltip/tooltip.component';
import {
VariantSelectorComponent,
VariantSelectorVariant,
@@ -19,11 +20,12 @@ export interface VerticalCartVariant extends VariantSelectorVariant {
descripcion?: string | null;
precio?: string | number;
maximum_addable_quantity?: number | null;
unavailable_message?: string | null;
}
@Component({
selector: 'app-product-vertical-with-cart-card',
imports: [ButtonComponent, QuantitySelectorComponent, VariantSelectorComponent],
imports: [ButtonComponent, QuantitySelectorComponent, TooltipComponent, VariantSelectorComponent],
templateUrl: './product-vertical-with-cart-card.component.html',
styleUrl: './product-vertical-with-cart-card.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -33,6 +35,7 @@ export class ProductVerticalWithCartCardComponent {
readonly description = input<string>('');
readonly price = input<number>(0);
readonly maximumAddableQuantity = input<number | null>(null);
readonly unavailableMessage = input<string | null>(null);
readonly variants = input<VerticalCartVariant[]>([]);
readonly saving = input(false);
@@ -59,6 +62,13 @@ export class ProductVerticalWithCartCardComponent {
() => 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();
});
constructor() {
effect(() => {