diff --git a/src/app/core/services/modal.service.spec.ts b/src/app/core/services/modal.service.spec.ts index b25464e..c6ece6b 100644 --- a/src/app/core/services/modal.service.spec.ts +++ b/src/app/core/services/modal.service.spec.ts @@ -7,6 +7,7 @@ import { firstValueFrom } from 'rxjs'; import { ConfirmDeleteModalComponent } from '../../shared/components/confirm-delete-modal/confirm-delete-modal.component'; import { ConfirmModalComponent } from '../../shared/components/confirm-modal/confirm-modal.component'; +import { ImageModalComponent } from '../../shared/components/image-modal/image-modal.component'; import { QrModalComponent } from '../../shared/components/qr-modal/qr-modal.component'; import { SimpleModalComponent } from '../../shared/components/simple-modal/simple-modal.component'; import { MODAL_DATA, ModalRef, ModalService } from './modal.service'; @@ -258,6 +259,36 @@ describe('ModalService', () => { showCloseButton: true, }); }); + + it('opens the image viewer fullscreen with normalized zoom limits', () => { + service.openImage({ + title: 'Producto', + src: '/images/producto.webp', + alt: 'Producto visto de frente', + initialZoom: 8, + minZoom: 0, + maxZoom: 3, + }); + + const activeModal = service.activeModal(); + + expect(activeModal?.component).toBe(ImageModalComponent); + expect(activeModal?.config).toEqual({ + title: 'Producto', + size: 'full', + presentation: 'fullscreen-media', + data: { + src: '/images/producto.webp', + alt: 'Producto visto de frente', + initialZoom: 3, + minZoom: 0.1, + maxZoom: 3, + }, + closeOnBackdrop: true, + closeOnEscape: true, + showCloseButton: true, + }); + }); }); @Component({ diff --git a/src/app/core/services/modal.service.ts b/src/app/core/services/modal.service.ts index 3dfd1ff..54d5915 100644 --- a/src/app/core/services/modal.service.ts +++ b/src/app/core/services/modal.service.ts @@ -2,16 +2,19 @@ import { InjectionToken, Injectable, Type, signal } from '@angular/core'; import { Observable, Subject, map } from 'rxjs'; import { ConfirmDeleteModalComponent } from '../../shared/components/confirm-delete-modal/confirm-delete-modal.component'; import { ConfirmModalComponent } from '../../shared/components/confirm-modal/confirm-modal.component'; +import { ImageModalComponent } from '../../shared/components/image-modal/image-modal.component'; import { QrModalComponent } from '../../shared/components/qr-modal/qr-modal.component'; import { SimpleModalComponent } from '../../shared/components/simple-modal/simple-modal.component'; export type ModalSize = 'qr' | 'sm' | 'md' | 'lg' | 'xl' | 'full'; -export type ModalDismissReason = 'backdrop' | 'escape' | 'programmatic' | 'replaced'; +export type ModalDismissReason = 'backdrop' | 'escape' | 'programmatic' | 'replaced' | 'swipe'; +export type ModalPresentation = 'dialog' | 'fullscreen-media'; export interface ModalConfig { title?: string; data?: TData; size?: ModalSize; + presentation?: ModalPresentation; closeOnBackdrop?: boolean; closeOnEscape?: boolean; showCloseButton?: boolean; @@ -62,6 +65,25 @@ export interface QrModalConfig extends Omit, 'data' | ' ticket: string; } +export interface ImageModalData { + src: string; + alt: string; + initialZoom: number; + minZoom: number; + maxZoom: number; +} + +export interface ImageModalConfig extends Omit< + ModalConfig, + 'data' | 'presentation' | 'size' +> { + src: string; + alt: string; + initialZoom?: number; + minZoom?: number; + maxZoom?: number; +} + export interface ActiveModalState { component: Type; config: NormalizedModalConfig; @@ -195,6 +217,33 @@ export class ModalService { }); } + openImage(config: ImageModalConfig): Observable { + return this.openImageRef(config).afterClosed$.pipe(map(() => undefined)); + } + + openImageRef(config: ImageModalConfig): ModalRef { + const { src, alt, initialZoom = 1, minZoom = 1, maxZoom = 4, ...modalConfig } = config; + const normalizedMinZoom = Math.max(0.1, minZoom); + const normalizedMaxZoom = Math.max(normalizedMinZoom, maxZoom); + const normalizedInitialZoom = Math.min( + normalizedMaxZoom, + Math.max(normalizedMinZoom, initialZoom), + ); + + return this.open(ImageModalComponent, { + ...modalConfig, + size: 'full', + presentation: 'fullscreen-media', + data: { + src, + alt, + initialZoom: normalizedInitialZoom, + minZoom: normalizedMinZoom, + maxZoom: normalizedMaxZoom, + }, + }); + } + private close(ref: ModalRef, result?: TResult): void { if (this.activeModalState()?.ref !== ref) { return; diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html index b36a8a7..d3d5d8c 100644 --- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html +++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html @@ -83,6 +83,9 @@ Abrir modal ancho Abrir simple modal + + Abrir visor de imagen +
{{ lastModalResult }} diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts index ae141d8..25d24fb 100644 --- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts +++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts @@ -51,6 +51,7 @@ function createModalServiceStub() { open: vi.fn(), openConfirm: vi.fn().mockReturnValue(of(true)), openConfirmDelete: vi.fn().mockReturnValue(of(false)), + openImage: vi.fn().mockReturnValue(of(undefined)), }; } @@ -281,6 +282,9 @@ describe('ReutilizablesTestPageComponent', () => { const deleteButton = buttons.find((button) => button.textContent?.includes('Abrir confirm delete'), ) as HTMLButtonElement; + const imageButton = buttons.find((button) => + button.textContent?.includes('Abrir visor de imagen'), + ) as HTMLButtonElement; expect(element.querySelector('[data-testid="modal-last-result"]')?.textContent).toContain( 'Todavia no se abrio ningun modal.', @@ -290,6 +294,8 @@ describe('ReutilizablesTestPageComponent', () => { fixture.detectChanges(); deleteButton.click(); fixture.detectChanges(); + imageButton.click(); + fixture.detectChanges(); expect(modalServiceStub.openConfirm).toHaveBeenCalledWith({ title: 'Confirmar accion', @@ -302,6 +308,11 @@ describe('ReutilizablesTestPageComponent', () => { 'Esta accion eliminara el producto del catalogo. Podras volver a crearlo manualmente.', confirmLabel: 'Eliminar', }); + expect(modalServiceStub.openImage).toHaveBeenCalledWith({ + title: 'Mochila urbana roja', + src: '/images/carousel-mochila-roja.webp', + alt: 'Mochila urbana roja vista de frente', + }); expect(element.querySelector('[data-testid="modal-last-result"]')?.textContent).toContain( 'Resultado: false', ); diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts index 1e5e77e..e7c3cac 100644 --- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts +++ b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts @@ -493,6 +493,14 @@ export class ReutilizablesTestPageComponent { }); } + protected openImageModal(): void { + this.modalService.openImage({ + title: 'Mochila urbana roja', + src: '/images/carousel-mochila-roja.webp', + alt: 'Mochila urbana roja vista de frente', + }); + } + private openConfirmModal(config: Parameters[0]): void { this.modalService.openConfirm(config).subscribe((confirmed) => { this.lastModalResult = `Resultado: ${confirmed}`; diff --git a/src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts b/src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts index ace59a0..59a7409 100644 --- a/src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts +++ b/src/app/features/store/pages/checkout-page/checkout-page.component.spec.ts @@ -159,6 +159,64 @@ describe('CheckoutPageComponent payment validation', () => { expect(component.checkoutRemainingTime()).toBe('10:00'); }); + it('checks the purchase when the countdown expires and redirects to the expired status', async () => { + const countdown = TestBed.inject(CheckoutCountdownService); + checkoutServiceStub.getPurchase.mockResolvedValue({ status: 'expired' }); + const { fixture, component } = createComponent(); + component.createdPurchase.set({ + id: 25, + status: 'created', + expires_at: new Date(Date.now() + 1_000).toISOString(), + expires_in_seconds: 1, + server_time: new Date().toISOString(), + items: [], + subtotal: '0.00', + total: '0.00', + }); + countdown.synchronize(component.createdPurchase()); + fixture.detectChanges(); + + await vi.advanceTimersByTimeAsync(1_000); + fixture.detectChanges(); + await Promise.resolve(); + + expect(checkoutServiceStub.getPurchase).toHaveBeenCalledOnce(); + expect(checkoutServiceStub.getPurchase).toHaveBeenCalledWith('tenant-test', 25); + expect(routerStub.navigate).toHaveBeenCalledWith(['/checkout/status', 25], { + queryParams: { status: 'expired' }, + }); + }); + + it('checks the purchase only once when the expired countdown remains at zero', async () => { + const countdown = TestBed.inject(CheckoutCountdownService); + checkoutServiceStub.getPurchase.mockResolvedValue({ + status: 'pending_payment', + expires_at: new Date(Date.now() - 1_000).toISOString(), + expires_in_seconds: 0, + server_time: new Date().toISOString(), + }); + const { fixture, component } = createComponent(); + component.createdPurchase.set({ + id: 25, + status: 'pending_payment', + expires_at: new Date(Date.now() - 1_000).toISOString(), + expires_in_seconds: 0, + server_time: new Date().toISOString(), + items: [], + subtotal: '0.00', + total: '0.00', + }); + countdown.synchronize(component.createdPurchase()); + fixture.detectChanges(); + + await Promise.resolve(); + fixture.detectChanges(); + await vi.advanceTimersByTimeAsync(5_000); + + expect(checkoutServiceStub.getPurchase).toHaveBeenCalledOnce(); + expect(routerStub.navigate).not.toHaveBeenCalled(); + }); + it('polls QR after five seconds and navigates only when payment is paid', async () => { checkoutServiceStub.getPurchase .mockResolvedValueOnce({ status: 'pending_payment' }) diff --git a/src/app/features/store/pages/checkout-page/checkout-page.component.ts b/src/app/features/store/pages/checkout-page/checkout-page.component.ts index bd8e320..25201a7 100644 --- a/src/app/features/store/pages/checkout-page/checkout-page.component.ts +++ b/src/app/features/store/pages/checkout-page/checkout-page.component.ts @@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, computed, + effect, inject, OnDestroy, OnInit, @@ -86,6 +87,7 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { private paymentMethodRequestId = 0; private navigationStarted = false; private cancelPurchasePromise: Promise | null = null; + private expirationCheckPurchaseId: number | null = null; @ViewChild(StepperComponent) stepper!: StepperComponent; @@ -176,6 +178,28 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { ); constructor() { + effect(() => { + const remainingSeconds = this.checkoutCountdownService.remainingSeconds(); + const purchaseId = this.createdPurchaseId() ?? this.createdPurchase()?.id ?? null; + + if (remainingSeconds !== null && remainingSeconds > 0) { + this.expirationCheckPurchaseId = null; + return; + } + + if ( + remainingSeconds !== 0 || + purchaseId === null || + this.navigationStarted || + this.expirationCheckPurchaseId === purchaseId + ) { + return; + } + + this.expirationCheckPurchaseId = purchaseId; + void this.checkPurchaseAfterCountdownExpiration(purchaseId); + }); + this.form.statusChanges .pipe(startWith(this.form.status)) .subscribe(() => this.isStep1Valid.set(this.form.valid)); @@ -719,6 +743,35 @@ export class CheckoutPageComponent implements OnInit, OnDestroy { void this.router.navigate(['/checkout/status', purchaseId]); } + private async checkPurchaseAfterCountdownExpiration(purchaseId: number): Promise { + const tenant = this.tenantService.tenant(); + + if (!tenant || this.navigationStarted) { + return; + } + + try { + const purchase = await this.checkoutService + .withCustomLoading() + .getPurchase(tenant.codigo, purchaseId); + + if (this.navigationStarted) { + return; + } + + if (purchase.status === 'expired') { + this.navigateToExpiredPurchaseStatus(); + return; + } + + this.checkoutCountdownService.synchronize(purchase); + } catch (error) { + if (this.isPurchaseExpiredError(error)) { + this.navigateToExpiredPurchaseStatus(); + } + } + } + private async loadPurchase(purchaseId: number): Promise { const tenant = this.tenantService.tenant(); if (!tenant) { diff --git a/src/app/shared/components/image-modal/image-modal.component.html b/src/app/shared/components/image-modal/image-modal.component.html new file mode 100644 index 0000000..aa13fd8 --- /dev/null +++ b/src/app/shared/components/image-modal/image-modal.component.html @@ -0,0 +1,58 @@ +
+
+ @if (!imageFailed()) { + + } @else { + + } +
+ +
+ + + +
+
diff --git a/src/app/shared/components/image-modal/image-modal.component.scss b/src/app/shared/components/image-modal/image-modal.component.scss new file mode 100644 index 0000000..e564692 --- /dev/null +++ b/src/app/shared/components/image-modal/image-modal.component.scss @@ -0,0 +1,146 @@ +:host { + display: flex; + min-height: 0; + flex: 1; +} + +.image-modal { + position: relative; + display: flex; + min-width: 0; + min-height: 0; + flex: 1; + flex-direction: column; + overflow: hidden; + background: black; + transform-origin: center top; +} + +.image-modal--settling { + transition: transform 180ms ease-out; +} + +.image-modal--gesturing { + will-change: transform; +} + +.image-modal__viewport { + display: flex; + min-width: 0; + min-height: 0; + flex: 1; + align-items: center; + justify-content: center; + overflow: hidden; + cursor: zoom-in; + touch-action: none; + user-select: none; +} + +.image-modal__viewport--zoomed { + cursor: grab; +} + +.image-modal__viewport--zoomed:active { + cursor: grabbing; +} + +.image-modal__image { + display: block; + max-width: 100%; + max-height: 100%; + object-fit: contain; + transform-origin: center; + transition: transform 120ms ease-out; + -webkit-user-drag: none; +} + +.image-modal--gesturing .image-modal__image { + transition: none; + will-change: transform; +} + +.image-modal__viewport:active .image-modal__image { + transition: none; +} + +.image-modal__error { + margin: 1rem; + color: #ffffff; + text-align: center; +} + +.image-modal__controls { + position: absolute; + right: 50%; + bottom: max(1.25rem, env(safe-area-inset-bottom)); + z-index: 1; + display: flex; + align-items: center; + overflow: hidden; + border: 1px solid rgba(255, 255, 255, 0.25); + border-radius: 2rem; + background: rgba(20, 20, 20, 0.78); + box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3); + transform: translateX(50%); + backdrop-filter: blur(0.5rem); +} + +.image-modal__control, +.image-modal__zoom { + display: inline-flex; + height: 2.75rem; + align-items: center; + justify-content: center; + border: 0; + color: #ffffff; + background: transparent; +} + +.image-modal__control { + width: 2.75rem; + font-size: 1.5rem; +} + +.image-modal__zoom { + min-width: 4rem; + padding: 0 0.5rem; + font-size: 0.875rem; + font-variant-numeric: tabular-nums; +} + +.image-modal__control:hover:not(:disabled), +.image-modal__zoom:hover { + background: rgba(255, 255, 255, 0.12); +} + +.image-modal__control:focus-visible, +.image-modal__zoom:focus-visible { + outline: 2px solid #ffffff; + outline-offset: -3px; +} + +.image-modal__control:disabled { + opacity: 0.35; +} + +@media (max-width: 576px) { + .image-modal__controls { + bottom: max(1rem, env(safe-area-inset-bottom)); + background: rgba(20, 20, 20, 0.94); + backdrop-filter: none; + } +} + +@media (pointer: coarse) { + .image-modal__controls { + background: rgba(20, 20, 20, 0.94); + backdrop-filter: none; + } +} + +@media (prefers-reduced-motion: reduce) { + .image-modal__image { + transition: none; + } +} diff --git a/src/app/shared/components/image-modal/image-modal.component.spec.ts b/src/app/shared/components/image-modal/image-modal.component.spec.ts new file mode 100644 index 0000000..5f2cdf8 --- /dev/null +++ b/src/app/shared/components/image-modal/image-modal.component.spec.ts @@ -0,0 +1,165 @@ +import '@angular/compiler'; +import { ComponentFixture, TestBed, getTestBed } from '@angular/core/testing'; +import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing'; +import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'; + +import { ImageModalData, MODAL_DATA, ModalRef } from '../../../core/services/modal.service'; +import { ImageModalComponent } from './image-modal.component'; + +describe('ImageModalComponent', () => { + let fixture: ComponentFixture; + const modalRef = { dismiss: vi.fn() }; + const data: ImageModalData = { + src: '/images/producto.webp', + alt: 'Vista frontal del producto', + initialZoom: 1, + minZoom: 1, + maxZoom: 2, + }; + + beforeAll(() => { + try { + getTestBed().initTestEnvironment(BrowserTestingModule, platformBrowserTesting()); + } catch { + // Test environment may already be initialized by another setup entrypoint. + } + }); + + beforeEach(async () => { + modalRef.dismiss.mockReset(); + await TestBed.configureTestingModule({ + imports: [ImageModalComponent], + providers: [ + { provide: MODAL_DATA, useValue: data }, + { provide: ModalRef, useValue: modalRef }, + ], + }).compileComponents(); + + fixture = TestBed.createComponent(ImageModalComponent); + fixture.detectChanges(); + }); + + afterEach(() => { + fixture.destroy(); + TestBed.resetTestingModule(); + }); + + it('renders the image and accessible zoom controls', () => { + const element = fixture.nativeElement as HTMLElement; + const image = element.querySelector('img') as HTMLImageElement; + + expect(image.getAttribute('src')).toBe('/images/producto.webp'); + expect(image.alt).toBe('Vista frontal del producto'); + expect(element.querySelector('[aria-label="Acercar"]')).not.toBeNull(); + expect(element.querySelector('[aria-label="Alejar"]')).not.toBeNull(); + }); + + it('zooms with controls, respects limits, and resets', () => { + const element = fixture.nativeElement as HTMLElement; + const zoomIn = element.querySelector('[aria-label="Acercar"]') as HTMLButtonElement; + const zoomOut = element.querySelector('[aria-label="Alejar"]') as HTMLButtonElement; + const reset = element.querySelector('[aria-label="Restablecer zoom"]') as HTMLButtonElement; + + zoomIn.click(); + fixture.detectChanges(); + expect(reset.textContent).toContain('150%'); + expect(zoomOut.disabled).toBe(false); + + zoomIn.click(); + fixture.detectChanges(); + expect(reset.textContent).toContain('200%'); + expect(zoomIn.disabled).toBe(true); + + reset.click(); + fixture.detectChanges(); + expect(reset.textContent).toContain('100%'); + expect(zoomOut.disabled).toBe(true); + }); + + it('supports pinch zoom through touch pointer events', async () => { + const viewport = fixture.nativeElement.querySelector('.image-modal__viewport') as HTMLElement; + const zoom = fixture.nativeElement.querySelector( + '[aria-label="Restablecer zoom"]', + ) as HTMLButtonElement; + + viewport.dispatchEvent(pointerEvent('pointerdown', 1, 100, 100)); + viewport.dispatchEvent(pointerEvent('pointerdown', 2, 200, 100)); + viewport.dispatchEvent(pointerEvent('pointermove', 2, 250, 100)); + await renderNextFrame(); + fixture.detectChanges(); + + expect(zoom.textContent).toContain('150%'); + }); + + it('dismisses with a downward swipe while the image is at its base zoom', async () => { + const viewport = fixture.nativeElement.querySelector('.image-modal__viewport') as HTMLElement; + const modal = fixture.nativeElement.querySelector('.image-modal') as HTMLElement; + + viewport.dispatchEvent(pointerEvent('pointerdown', 1, 150, 100)); + viewport.dispatchEvent(pointerEvent('pointermove', 1, 155, 230)); + await renderNextFrame(); + fixture.detectChanges(); + + expect(modal.style.transform).toBe('translate3d(0, 130px, 0)'); + expect(Number(modal.style.opacity)).toBeLessThan(1); + + viewport.dispatchEvent(pointerEvent('pointerup', 1, 155, 230)); + + expect(modalRef.dismiss).toHaveBeenCalledWith('swipe'); + }); + + it('returns smoothly to its position when the swipe is too short', async () => { + const viewport = fixture.nativeElement.querySelector('.image-modal__viewport') as HTMLElement; + const modal = fixture.nativeElement.querySelector('.image-modal') as HTMLElement; + + viewport.dispatchEvent(pointerEvent('pointerdown', 1, 150, 100)); + viewport.dispatchEvent(pointerEvent('pointermove', 1, 150, 160)); + await renderNextFrame(); + fixture.detectChanges(); + expect(modal.style.transform).toBe('translate3d(0, 60px, 0)'); + + viewport.dispatchEvent(pointerEvent('pointerup', 1, 150, 160)); + fixture.detectChanges(); + + expect(modalRef.dismiss).not.toHaveBeenCalled(); + expect(modal.classList.contains('image-modal--settling')).toBe(true); + expect(modal.style.transform).toBe('translate3d(0, 0px, 0)'); + }); + + it('does not dismiss with a downward gesture while the image is zoomed', () => { + const element = fixture.nativeElement as HTMLElement; + const viewport = element.querySelector('.image-modal__viewport') as HTMLElement; + const zoomIn = element.querySelector('[aria-label="Acercar"]') as HTMLButtonElement; + zoomIn.click(); + fixture.detectChanges(); + + viewport.dispatchEvent(pointerEvent('pointerdown', 1, 150, 100)); + viewport.dispatchEvent(pointerEvent('pointermove', 1, 155, 230)); + viewport.dispatchEvent(pointerEvent('pointerup', 1, 155, 230)); + + expect(modalRef.dismiss).not.toHaveBeenCalled(); + }); + + it('shows a fallback when the image cannot be loaded', () => { + const image = fixture.nativeElement.querySelector('img') as HTMLImageElement; + image.dispatchEvent(new Event('error')); + fixture.detectChanges(); + + expect(fixture.nativeElement.querySelector('[role="alert"]')?.textContent).toContain( + 'No se pudo cargar la imagen', + ); + }); +}); + +function pointerEvent(type: string, pointerId: number, clientX: number, clientY: number): Event { + const event = new MouseEvent(type, { bubbles: true, clientX, clientY }); + Object.defineProperties(event, { + pointerId: { value: pointerId }, + pointerType: { value: 'touch' }, + }); + return event; +} + +async function renderNextFrame(): Promise { + await new Promise((resolve) => requestAnimationFrame(() => resolve())); +} diff --git a/src/app/shared/components/image-modal/image-modal.component.ts b/src/app/shared/components/image-modal/image-modal.component.ts new file mode 100644 index 0000000..b344d76 --- /dev/null +++ b/src/app/shared/components/image-modal/image-modal.component.ts @@ -0,0 +1,395 @@ +import { + ChangeDetectionStrategy, + Component, + DestroyRef, + ElementRef, + computed, + inject, + signal, + viewChild, +} from '@angular/core'; + +import { ImageModalData, MODAL_DATA, ModalRef } from '../../../core/services/modal.service'; + +const SWIPE_DISMISS_DISTANCE = 100; +const SWIPE_DIRECTION_RATIO = 1.25; + +interface Point { + x: number; + y: number; +} + +interface ViewerGeometry { + imageHeight: number; + imageWidth: number; + viewportHeight: number; + viewportLeft: number; + viewportTop: number; + viewportWidth: number; +} + +@Component({ + selector: 'app-image-modal', + templateUrl: './image-modal.component.html', + styleUrl: './image-modal.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ImageModalComponent { + protected readonly data = inject(MODAL_DATA); + private readonly modalRef = inject>(ModalRef); + private readonly destroyRef = inject(DestroyRef); + private readonly viewport = viewChild.required>('viewport'); + private readonly image = viewChild>('image'); + private readonly pointers = new Map(); + + protected readonly zoom = signal(this.data.initialZoom); + protected readonly offsetX = signal(0); + protected readonly offsetY = signal(0); + protected readonly imageFailed = signal(false); + protected readonly swipeOffsetY = signal(0); + protected readonly swipeSettling = signal(false); + protected readonly gestureActive = signal(false); + protected readonly transform = computed( + () => `translate3d(${this.offsetX()}px, ${this.offsetY()}px, 0) scale(${this.zoom()})`, + ); + protected readonly zoomLabel = computed(() => `${Math.round(this.zoom() * 100)}%`); + protected readonly swipeTransform = computed(() => `translate3d(0, ${this.swipeOffsetY()}px, 0)`); + + private dragStart: Point | null = null; + private dragOffset: Point = { x: 0, y: 0 }; + private pinchDistance = 0; + private pinchZoom = 1; + private pinchLocal: Point = { x: 0, y: 0 }; + private pointerDownAt: Point | null = null; + private gestureMoved = false; + private hadMultiplePointers = false; + private lastTapAt = 0; + private swipeStart: Point | null = null; + private geometry: ViewerGeometry | null = null; + private animationFrameId: number | null = null; + + constructor() { + this.destroyRef.onDestroy(() => this.cancelGestureFrame()); + } + + protected zoomIn(): void { + this.setZoomAt(Math.min(this.data.maxZoom, this.zoom() + 0.5)); + } + + protected zoomOut(): void { + this.setZoomAt(Math.max(this.data.minZoom, this.zoom() - 0.5)); + } + + protected reset(): void { + this.zoom.set(this.data.initialZoom); + this.offsetX.set(0); + this.offsetY.set(0); + } + + protected onWheel(event: WheelEvent): void { + event.preventDefault(); + const factor = event.deltaY < 0 ? 1.15 : 1 / 1.15; + this.setZoomAt(this.zoom() * factor, event.clientX, event.clientY); + } + + protected onDoubleClick(event: MouseEvent): void { + this.toggleZoom(event.clientX, event.clientY); + } + + protected onPointerDown(event: PointerEvent): void { + if (event.pointerType === 'mouse' && event.button !== 0) { + return; + } + + event.preventDefault(); + if (this.pointers.size === 0) { + this.refreshGeometry(); + this.gestureActive.set(true); + } + this.viewport().nativeElement.setPointerCapture?.(event.pointerId); + const point = { x: event.clientX, y: event.clientY }; + this.pointers.set(event.pointerId, point); + this.pointerDownAt = point; + this.gestureMoved = false; + + if (this.pointers.size === 1) { + this.swipeSettling.set(false); + this.dragStart = point; + this.dragOffset = { x: this.offsetX(), y: this.offsetY() }; + this.swipeStart = + event.pointerType === 'touch' && this.zoom() <= this.data.minZoom + 0.01 ? point : null; + } else if (this.pointers.size === 2) { + this.hadMultiplePointers = true; + this.swipeStart = null; + this.swipeOffsetY.set(0); + this.beginPinch(); + } + } + + protected onPointerMove(event: PointerEvent): void { + if (!this.pointers.has(event.pointerId)) { + return; + } + + const point = { x: event.clientX, y: event.clientY }; + this.pointers.set(event.pointerId, point); + + if (this.pointerDownAt && this.distance(this.pointerDownAt, point) > 4) { + this.gestureMoved = true; + } + + this.scheduleGestureFrame(); + } + + protected onPointerUp(event: PointerEvent): void { + const wasTouch = event.pointerType === 'touch'; + const trackedPoint = this.pointers.get(event.pointerId); + const endPoint = trackedPoint ? { x: event.clientX, y: event.clientY } : null; + if (endPoint) { + this.pointers.set(event.pointerId, endPoint); + if (this.animationFrameId !== null) { + this.flushGestureFrame(); + } else { + this.applyPointerMovement(); + } + } + const shouldDismiss = + event.type === 'pointerup' && + wasTouch && + endPoint !== null && + this.isSwipeDown(this.swipeStart, endPoint); + this.pointers.delete(event.pointerId); + const viewport = this.viewport().nativeElement; + if (viewport.hasPointerCapture?.(event.pointerId)) { + viewport.releasePointerCapture(event.pointerId); + } + + if (shouldDismiss) { + this.resetGesture(); + this.modalRef.dismiss('swipe'); + return; + } + + if (wasTouch && endPoint && !this.gestureMoved && !this.hadMultiplePointers) { + const now = Date.now(); + if (now - this.lastTapAt < 300) { + this.toggleZoom(endPoint.x, endPoint.y); + this.lastTapAt = 0; + } else { + this.lastTapAt = now; + } + } + + if (this.pointers.size === 1) { + const remaining = [...this.pointers.values()][0]; + this.dragStart = remaining; + this.dragOffset = { x: this.offsetX(), y: this.offsetY() }; + } else if (this.pointers.size === 0) { + this.dragStart = null; + this.pointerDownAt = null; + this.hadMultiplePointers = false; + this.swipeStart = null; + this.gestureActive.set(false); + if (this.swipeOffsetY() > 0) { + this.swipeSettling.set(true); + this.swipeOffsetY.set(0); + } + this.clampOffset(); + } + } + + protected onImageLoad(): void { + this.imageFailed.set(false); + this.refreshGeometry(); + this.clampOffset(); + } + + private beginPinch(): void { + const [first, second] = [...this.pointers.values()]; + const midpoint = this.midpoint(first, second); + const geometry = this.geometry ?? this.refreshGeometry(); + if (!geometry) { + return; + } + + this.pinchDistance = Math.max(1, this.distance(first, second)); + this.pinchZoom = this.zoom(); + this.pinchLocal = { + x: + (midpoint.x - (geometry.viewportLeft + geometry.viewportWidth / 2) - this.offsetX()) / + this.zoom(), + y: + (midpoint.y - (geometry.viewportTop + geometry.viewportHeight / 2) - this.offsetY()) / + this.zoom(), + }; + } + + private toggleZoom(clientX?: number, clientY?: number): void { + const target = + this.zoom() > this.data.minZoom + 0.01 + ? this.data.minZoom + : Math.min(this.data.maxZoom, Math.max(2, this.data.minZoom)); + this.setZoomAt(target, clientX, clientY); + } + + private setZoomAt(value: number, clientX?: number, clientY?: number): void { + const nextZoom = this.clampZoom(value); + const currentZoom = this.zoom(); + const geometry = this.refreshGeometry(); + + if (clientX !== undefined && clientY !== undefined && currentZoom > 0 && geometry) { + const pointX = clientX - (geometry.viewportLeft + geometry.viewportWidth / 2); + const pointY = clientY - (geometry.viewportTop + geometry.viewportHeight / 2); + const localX = (pointX - this.offsetX()) / currentZoom; + const localY = (pointY - this.offsetY()) / currentZoom; + this.offsetX.set(pointX - localX * nextZoom); + this.offsetY.set(pointY - localY * nextZoom); + } + + this.zoom.set(nextZoom); + if (nextZoom <= this.data.minZoom) { + this.offsetX.set(0); + this.offsetY.set(0); + } + this.clampOffset(); + } + + private clampZoom(value: number): number { + return Math.min(this.data.maxZoom, Math.max(this.data.minZoom, value)); + } + + private clampOffset(): void { + const geometry = this.geometry; + if (!geometry) { + return; + } + + const maxX = Math.max(0, (geometry.imageWidth * this.zoom() - geometry.viewportWidth) / 2); + const maxY = Math.max(0, (geometry.imageHeight * this.zoom() - geometry.viewportHeight) / 2); + + this.offsetX.set(Math.min(maxX, Math.max(-maxX, this.offsetX()))); + this.offsetY.set(Math.min(maxY, Math.max(-maxY, this.offsetY()))); + } + + private midpoint(first: Point, second: Point): Point { + return { x: (first.x + second.x) / 2, y: (first.y + second.y) / 2 }; + } + + private distance(first: Point, second: Point): number { + return Math.hypot(second.x - first.x, second.y - first.y); + } + + private isSwipeDown(start: Point | null, end: Point): boolean { + if (!start || this.hadMultiplePointers || this.zoom() > this.data.minZoom + 0.01) { + return false; + } + + const deltaX = Math.abs(end.x - start.x); + const deltaY = end.y - start.y; + return deltaY >= SWIPE_DISMISS_DISTANCE && deltaY >= deltaX * SWIPE_DIRECTION_RATIO; + } + + private resetGesture(): void { + this.cancelGestureFrame(); + this.pointers.clear(); + this.dragStart = null; + this.pointerDownAt = null; + this.swipeStart = null; + this.hadMultiplePointers = false; + this.gestureActive.set(false); + } + + private scheduleGestureFrame(): void { + if (this.animationFrameId !== null) { + return; + } + + this.animationFrameId = requestAnimationFrame(() => { + this.animationFrameId = null; + this.applyPointerMovement(); + }); + } + + private flushGestureFrame(): void { + if (this.animationFrameId === null) { + return; + } + + cancelAnimationFrame(this.animationFrameId); + this.animationFrameId = null; + this.applyPointerMovement(); + } + + private cancelGestureFrame(): void { + if (this.animationFrameId !== null) { + cancelAnimationFrame(this.animationFrameId); + this.animationFrameId = null; + } + } + + private applyPointerMovement(): void { + if (this.pointers.size === 2) { + const [first, second] = [...this.pointers.values()]; + const geometry = this.geometry; + if (!geometry) { + return; + } + + const distance = this.distance(first, second); + const midpoint = this.midpoint(first, second); + const nextZoom = this.clampZoom(this.pinchZoom * (distance / this.pinchDistance)); + + this.zoom.set(nextZoom); + this.offsetX.set( + midpoint.x - + (geometry.viewportLeft + geometry.viewportWidth / 2) - + this.pinchLocal.x * nextZoom, + ); + this.offsetY.set( + midpoint.y - + (geometry.viewportTop + geometry.viewportHeight / 2) - + this.pinchLocal.y * nextZoom, + ); + this.clampOffset(); + return; + } + + if (this.pointers.size !== 1) { + return; + } + + const point = [...this.pointers.values()][0]; + if (this.swipeStart) { + const deltaX = Math.abs(point.x - this.swipeStart.x); + const deltaY = point.y - this.swipeStart.y; + this.swipeOffsetY.set(deltaY > 0 && deltaY >= deltaX ? deltaY : 0); + return; + } + + if (this.dragStart && this.zoom() > this.data.minZoom) { + this.offsetX.set(this.dragOffset.x + point.x - this.dragStart.x); + this.offsetY.set(this.dragOffset.y + point.y - this.dragStart.y); + this.clampOffset(); + } + } + + private refreshGeometry(): ViewerGeometry | null { + const viewport = this.viewport().nativeElement; + const image = this.image()?.nativeElement; + if (!image) { + this.geometry = null; + return null; + } + + const rect = viewport.getBoundingClientRect(); + this.geometry = { + imageHeight: image.offsetHeight, + imageWidth: image.offsetWidth, + viewportHeight: viewport.clientHeight, + viewportLeft: rect.left, + viewportTop: rect.top, + viewportWidth: viewport.clientWidth, + }; + return this.geometry; + } +} diff --git a/src/app/shared/components/modal-host/modal-host.component.html b/src/app/shared/components/modal-host/modal-host.component.html index 57f3e48..bea49e7 100644 --- a/src/app/shared/components/modal-host/modal-host.component.html +++ b/src/app/shared/components/modal-host/modal-host.component.html @@ -2,6 +2,7 @@ { afterEach(() => { doc.body.style.overflow = ''; doc.body.style.paddingRight = ''; + doc.body.style.position = ''; + doc.body.style.top = ''; + doc.body.style.left = ''; + doc.body.style.width = ''; TestBed.resetTestingModule(); }); @@ -99,6 +103,10 @@ describe('ModalHostComponent', () => { expect(service.activeModal()).toBeNull(); expect(doc.body.style.overflow).toBe(''); expect(doc.body.style.paddingRight).toBe(''); + expect(doc.body.style.position).toBe(''); + expect(doc.body.style.top).toBe(''); + expect(doc.body.style.left).toBe(''); + expect(doc.body.style.width).toBe(''); }); it('closes on backdrop click when enabled', () => { diff --git a/src/app/shared/components/modal-host/modal-host.component.ts b/src/app/shared/components/modal-host/modal-host.component.ts index a85e7e9..137fa33 100644 --- a/src/app/shared/components/modal-host/modal-host.component.ts +++ b/src/app/shared/components/modal-host/modal-host.component.ts @@ -55,11 +55,23 @@ export class ModalHostComponent { const body = this.document.body; const previousOverflow = body.style.overflow; const previousPaddingRight = body.style.paddingRight; + const previousPosition = body.style.position; + const previousTop = body.style.top; + const previousLeft = body.style.left; + const previousWidth = body.style.width; const view = this.document.defaultView; + const scrollX = view?.scrollX ?? 0; + const scrollY = view?.scrollY ?? 0; const scrollbarWidth = view ? Math.max(0, view.innerWidth - this.document.documentElement.clientWidth) : 0; + const activeElement = this.document.activeElement; + + if (activeElement instanceof HTMLElement && activeElement !== body) { + activeElement.blur(); + } + if (scrollbarWidth > 0 && view) { const currentPaddingRight = Number.parseFloat(view.getComputedStyle(body).paddingRight) || 0; @@ -68,6 +80,47 @@ export class ModalHostComponent { body.style.overflow = 'hidden'; + const isIos = view + ? /iPad|iPhone|iPod/.test(view.navigator.userAgent) || + (view.navigator.platform === 'MacIntel' && view.navigator.maxTouchPoints > 1) + : false; + + if (isIos) { + body.style.position = 'fixed'; + body.style.top = `${-scrollY}px`; + body.style.left = `${-scrollX}px`; + body.style.width = '100%'; + } + + let viewportFrame: number | undefined; + const viewportSyncTimers: number[] = []; + const syncVisualViewport = () => { + if (!view) { + return; + } + + if (viewportFrame !== undefined) { + view.cancelAnimationFrame(viewportFrame); + } + + viewportFrame = view.requestAnimationFrame(() => { + viewportFrame = undefined; + this.modalShell()?.setVisualViewport(view.visualViewport, view.scrollX, view.scrollY); + }); + }; + + view?.visualViewport?.addEventListener('resize', syncVisualViewport); + view?.visualViewport?.addEventListener('scroll', syncVisualViewport); + view?.addEventListener('orientationchange', syncVisualViewport); + syncVisualViewport(); + + if (view) { + viewportSyncTimers.push( + view.setTimeout(syncVisualViewport, 100), + view.setTimeout(syncVisualViewport, 300), + ); + } + const onKeyDown = (event: KeyboardEvent) => { if (event.key !== 'Escape' || !this.activeModal()?.config.closeOnEscape) { return; @@ -82,8 +135,26 @@ export class ModalHostComponent { onCleanup(() => { this.document.removeEventListener('keydown', onKeyDown); + view?.visualViewport?.removeEventListener('resize', syncVisualViewport); + view?.visualViewport?.removeEventListener('scroll', syncVisualViewport); + view?.removeEventListener('orientationchange', syncVisualViewport); + + if (viewportFrame !== undefined) { + view?.cancelAnimationFrame(viewportFrame); + } + + viewportSyncTimers.forEach((timer) => view?.clearTimeout(timer)); + body.style.overflow = previousOverflow; body.style.paddingRight = previousPaddingRight; + body.style.position = previousPosition; + body.style.top = previousTop; + body.style.left = previousLeft; + body.style.width = previousWidth; + + if (isIos) { + view?.scrollTo(scrollX, scrollY); + } }); }); } diff --git a/src/app/shared/components/modal-shell/modal-shell.component.html b/src/app/shared/components/modal-shell/modal-shell.component.html index e392599..c5e1fd8 100644 --- a/src/app/shared/components/modal-shell/modal-shell.component.html +++ b/src/app/shared/components/modal-shell/modal-shell.component.html @@ -1,4 +1,9 @@ -
+
>('shell'); private readonly panel = viewChild.required>('panel'); readonly title = input(); readonly size = input('md'); + readonly presentation = input('dialog'); readonly showCloseButton = input(true); readonly backdropClick = output(); @@ -46,6 +48,28 @@ export class ModalShellComponent { return this.title() ? this.titleId : null; } + setVisualViewport(viewport: VisualViewport | null, layoutScrollX = 0, layoutScrollY = 0): void { + const shell = this.shell().nativeElement; + + if (!viewport) { + shell.style.removeProperty('--modal-viewport-top'); + shell.style.removeProperty('--modal-viewport-left'); + shell.style.removeProperty('--modal-viewport-width'); + shell.style.removeProperty('--modal-viewport-height'); + return; + } + + // pageTop/pageLeft are a useful fallback for WebKit versions that update + // offsetTop/offsetLeft one frame late after dismissing a native control. + const top = Math.max(viewport.offsetTop, viewport.pageTop - layoutScrollY); + const left = Math.max(viewport.offsetLeft, viewport.pageLeft - layoutScrollX); + + shell.style.setProperty('--modal-viewport-top', `${top}px`); + shell.style.setProperty('--modal-viewport-left', `${left}px`); + shell.style.setProperty('--modal-viewport-width', `${viewport.width}px`); + shell.style.setProperty('--modal-viewport-height', `${viewport.height}px`); + } + focusInitialElement(): void { const panel = this.panel().nativeElement; const focusTarget = panel.querySelector( diff --git a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html index fc92f95..01df682 100644 --- a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html +++ b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.html @@ -107,6 +107,17 @@
@if (imageUrl(); as image) { - + } diff --git a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.scss b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.scss index 4b2496a..58cb81b 100644 --- a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.scss +++ b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.scss @@ -153,11 +153,27 @@ margin-top: 0.75rem; } - &__map { + &__map-button { display: block; width: min(100%, 720px); - max-height: 680px; margin: 3rem auto 0; + padding: 0; + overflow: hidden; + border: 0; + border-radius: 0.4rem; + background: transparent; + cursor: zoom-in; + + &:focus-visible { + outline: 3px solid var(--tenant-primary); + outline-offset: 0.25rem; + } + } + + &__map { + display: block; + width: 100%; + max-height: 680px; object-fit: contain; } } @@ -188,7 +204,7 @@ display: none; } - &__map { + &__map-button { margin-top: 2rem; } } diff --git a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.spec.ts b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.spec.ts index 311d51a..9b0aebe 100644 --- a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.spec.ts +++ b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.spec.ts @@ -104,6 +104,10 @@ describe('ProductTicketSelectorComponent', () => { }; catalogService.withoutLoading.mockReturnValue(catalogService); cartService.withoutLoading.mockReturnValue(cartService); + const modalService = { + openConfirmDelete: vi.fn().mockReturnValue(of(true)), + openImage: vi.fn(), + }; await TestBed.configureTestingModule({ imports: [ProductTicketSelectorComponent], @@ -112,7 +116,7 @@ describe('ProductTicketSelectorComponent', () => { { provide: CartService, useValue: cartService }, { provide: ModalService, - useValue: { openConfirmDelete: vi.fn().mockReturnValue(of(true)) }, + useValue: modalService, }, { provide: ToastService, useValue: { danger: toastDanger } }, ], @@ -125,7 +129,7 @@ describe('ProductTicketSelectorComponent', () => { await fixture.whenStable(); fixture.detectChanges(); - return { fixture, getVariantOptions, cartService, toastDanger }; + return { fixture, getVariantOptions, cartService, toastDanger, modalService }; } it('loads one map, recalculates the cascade locally and reserves only after the last select', async () => { @@ -226,6 +230,25 @@ describe('ProductTicketSelectorComponent', () => { ]); }); + it('opens the zoomable image modal when the seating map is clicked', async () => { + const { fixture, modalService } = await createComponent({ + maps: [mapResponse([variant(401, 'general', 'A', '1', '1')])], + }); + fixture.componentRef.setInput('imageUrl', '/images/plano.png'); + fixture.detectChanges(); + + const button = fixture.nativeElement.querySelector( + 'button[aria-label="Ampliar plano de ubicaciones"]', + ) as HTMLButtonElement; + button.click(); + + expect(modalService.openImage).toHaveBeenCalledWith({ + title: 'Entrada', + src: '/images/plano.png', + alt: 'Plano de ubicaciones de Entrada', + }); + }); + it('clears only the seat after a stock conflict when the row still has alternatives', async () => { const failed = variant(401, 'general', 'A', '1', '1'); const alternative = variant(402, 'general', 'A', '1', '2'); diff --git a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts index f420a03..7d96ec7 100644 --- a/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts +++ b/src/app/shared/components/product-ticket-selector/product-ticket-selector.component.ts @@ -154,6 +154,14 @@ export class ProductTicketSelectorComponent { if (this.hasSelection() && variantIds.length > 0) this.buy.emit(variantIds); } + protected openImage(src: string): void { + this.modalService.openImage({ + title: this.title(), + src, + alt: `Plano de ubicaciones de ${this.title()}`, + }); + } + protected addRow(): void { if (!this.canAddRow()) return; const row = this.createRow(this.nextRowId++); diff --git a/src/index.html b/src/index.html index cc30d1b..88bf0ca 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,16 @@ - - - ShopitFront - - - - - - - + + + ShopitFront + + + + + + +