Merge branch 'fix/zoom_block' of https://gitea.quo.ar/tbianchini/shopit-front into fix/zoom_block

src/app/core/services/modal.service.ts

@@ -7,7 +7,7 @@ import { QrModalComponent } from '../../shared/components/qr-modal/qr-modal.comp
 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<TData = unknown> {

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' })

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<boolean> | 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<void> {
+    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<void> {
     const tenant = this.tenantService.tenant();
     if (!tenant) {

src/app/shared/components/image-modal/image-modal.component.html

@@ -1,4 +1,9 @@
-<div class="image-modal">
+<div
+  class="image-modal"
+  [class.image-modal--gesturing]="gestureActive()"
+  [class.image-modal--settling]="swipeSettling()"
+  [style.transform]="swipeTransform()"
+>
   <div
     #viewport
     class="image-modal__viewport"
@@ -17,6 +22,7 @@
         [src]="data.src"
         [alt]="data.alt"
         [style.transform]="transform()"
+        decoding="async"
         draggable="false"
         (load)="onImageLoad()"
         (error)="imageFailed.set(true)"

src/app/shared/components/image-modal/image-modal.component.scss

@@ -12,7 +12,16 @@
   flex: 1;
   flex-direction: column;
   overflow: hidden;
-  background: #111111;
+  background: black;
+  transform-origin: center top;
+}
+
+.image-modal--settling {
+  transition: transform 180ms ease-out;
+}
+
+.image-modal--gesturing {
+  will-change: transform;
 }
 
 .image-modal__viewport {
@@ -43,10 +52,14 @@
   object-fit: contain;
   transform-origin: center;
   transition: transform 120ms ease-out;
-  will-change: transform;
   -webkit-user-drag: none;
 }
 
+.image-modal--gesturing .image-modal__image {
+  transition: none;
+  will-change: transform;
+}
+
 .image-modal__viewport:active .image-modal__image {
   transition: none;
 }
@@ -114,6 +127,15 @@
 @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;
   }
 }
 

src/app/shared/components/image-modal/image-modal.component.spec.ts

@@ -1,13 +1,14 @@
 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 } from 'vitest';
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { ImageModalData, MODAL_DATA } from '../../../core/services/modal.service';
+import { ImageModalData, MODAL_DATA, ModalRef } from '../../../core/services/modal.service';
 import { ImageModalComponent } from './image-modal.component';
 
 describe('ImageModalComponent', () => {
   let fixture: ComponentFixture<ImageModalComponent>;
+  const modalRef = { dismiss: vi.fn() };
   const data: ImageModalData = {
     src: '/images/producto.webp',
     alt: 'Vista frontal del producto',
@@ -25,9 +26,13 @@ describe('ImageModalComponent', () => {
   });
 
   beforeEach(async () => {
+    modalRef.dismiss.mockReset();
     await TestBed.configureTestingModule({
       imports: [ImageModalComponent],
-      providers: [{ provide: MODAL_DATA, useValue: data }],
+      providers: [
+        { provide: MODAL_DATA, useValue: data },
+        { provide: ModalRef, useValue: modalRef },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ImageModalComponent);
@@ -71,7 +76,7 @@ describe('ImageModalComponent', () => {
     expect(zoomOut.disabled).toBe(true);
   });
 
-  it('supports pinch zoom through touch pointer events', () => {
+  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"]',
@@ -80,11 +85,61 @@ describe('ImageModalComponent', () => {
     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'));
@@ -104,3 +159,7 @@ function pointerEvent(type: string, pointerId: number, clientX: number, clientY:
   });
   return event;
 }
+
+async function renderNextFrame(): Promise<void> {
+  await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+}

src/app/shared/components/image-modal/image-modal.component.ts

@@ -1,6 +1,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   ElementRef,
   computed,
   inject,
@@ -8,13 +9,25 @@ import {
   viewChild,
 } from '@angular/core';
 
-import { ImageModalData, MODAL_DATA } from '../../../core/services/modal.service';
+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',
@@ -23,6 +36,8 @@ interface Point {
 })
 export class ImageModalComponent {
   protected readonly data = inject<ImageModalData>(MODAL_DATA);
+  private readonly modalRef = inject<ModalRef<void>>(ModalRef);
+  private readonly destroyRef = inject(DestroyRef);
   private readonly viewport = viewChild.required<ElementRef<HTMLElement>>('viewport');
   private readonly image = viewChild<ElementRef<HTMLImageElement>>('image');
   private readonly pointers = new Map<number, Point>();
@@ -31,10 +46,14 @@ export class ImageModalComponent {
   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 };
@@ -45,6 +64,13 @@ export class ImageModalComponent {
   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));
@@ -76,6 +102,10 @@ export class ImageModalComponent {
     }
 
     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);
@@ -83,10 +113,15 @@ export class ImageModalComponent {
     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();
     }
   }
@@ -103,40 +138,42 @@ export class ImageModalComponent {
       this.gestureMoved = true;
     }
 
-    if (this.pointers.size === 2) {
-      const [first, second] = [...this.pointers.values()];
-      const distance = this.distance(first, second);
-      const midpoint = this.midpoint(first, second);
-      const nextZoom = this.clampZoom(this.pinchZoom * (distance / this.pinchDistance));
-      const rect = this.viewport().nativeElement.getBoundingClientRect();
-
-      this.zoom.set(nextZoom);
-      this.offsetX.set(midpoint.x - (rect.left + rect.width / 2) - this.pinchLocal.x * nextZoom);
-      this.offsetY.set(midpoint.y - (rect.top + rect.height / 2) - this.pinchLocal.y * nextZoom);
-      this.clampOffset();
-      return;
-    }
-
-    if (this.pointers.size === 1 && 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();
-    }
+    this.scheduleGestureFrame();
   }
 
   protected onPointerUp(event: PointerEvent): void {
     const wasTouch = event.pointerType === 'touch';
-    const tapPoint = this.pointers.get(event.pointerId);
+    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 (wasTouch && tapPoint && !this.gestureMoved && !this.hadMultiplePointers) {
+    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(tapPoint.x, tapPoint.y);
+        this.toggleZoom(endPoint.x, endPoint.y);
         this.lastTapAt = 0;
       } else {
         this.lastTapAt = now;
@@ -151,25 +188,39 @@ export class ImageModalComponent {
       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 rect = this.viewport().nativeElement.getBoundingClientRect();
+    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 - (rect.left + rect.width / 2) - this.offsetX()) / this.zoom(),
-      y: (midpoint.y - (rect.top + rect.height / 2) - this.offsetY()) / this.zoom(),
+      x:
+        (midpoint.x - (geometry.viewportLeft + geometry.viewportWidth / 2) - this.offsetX()) /
+        this.zoom(),
+      y:
+        (midpoint.y - (geometry.viewportTop + geometry.viewportHeight / 2) - this.offsetY()) /
+        this.zoom(),
     };
   }
 
@@ -184,11 +235,11 @@ export class ImageModalComponent {
   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) {
-      const rect = this.viewport().nativeElement.getBoundingClientRect();
-      const pointX = clientX - (rect.left + rect.width / 2);
-      const pointY = clientY - (rect.top + rect.height / 2);
+    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);
@@ -208,14 +259,13 @@ export class ImageModalComponent {
   }
 
   private clampOffset(): void {
-    const viewport = this.viewport().nativeElement;
-    const image = this.image()?.nativeElement;
-    if (!image) {
+    const geometry = this.geometry;
+    if (!geometry) {
       return;
     }
 
-    const maxX = Math.max(0, (image.offsetWidth * this.zoom() - viewport.clientWidth) / 2);
-    const maxY = Math.max(0, (image.offsetHeight * this.zoom() - viewport.clientHeight) / 2);
+    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())));
@@ -228,4 +278,118 @@ export class ImageModalComponent {
   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;
+  }
 }

src/app/shared/components/modal-host/modal-host.component.spec.ts

@@ -51,6 +51,10 @@ describe('ModalHostComponent', () => {
   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', () => {

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);
+        }
       });
     });
   }

src/app/shared/components/modal-shell/modal-shell.component.html

@@ -1,4 +1,5 @@
 <div
+  #shell
   class="modal-shell"
   [class.modal-shell--fullscreen-media]="presentation() === 'fullscreen-media'"
   (click)="backdropClick.emit()"

src/app/shared/components/modal-shell/modal-shell.component.scss

@@ -4,7 +4,10 @@
 
 .modal-shell {
   position: fixed;
-  inset: 0;
+  top: var(--modal-viewport-top, 0);
+  left: var(--modal-viewport-left, 0);
+  width: var(--modal-viewport-width, 100vw);
+  height: var(--modal-viewport-height, 100dvh);
   z-index: 2000;
   display: flex;
   align-items: center;

src/app/shared/components/modal-shell/modal-shell.component.ts

@@ -19,6 +19,7 @@ import { ModalPresentation, ModalSize } from '../../../core/services/modal.servi
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ModalShellComponent {
+  private readonly shell = viewChild.required<ElementRef<HTMLElement>>('shell');
   private readonly panel = viewChild.required<ElementRef<HTMLElement>>('panel');
 
   readonly title = input<string | undefined>();
@@ -47,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<HTMLElement>(

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

@@ -107,6 +107,17 @@
   </div>
 
   @if (imageUrl(); as image) {
-    <img class="ticket-selector__map" [src]="image" [alt]="'Plano de ubicaciones de ' + title()" />
+    <button
+      type="button"
+      class="ticket-selector__map-button"
+      aria-label="Ampliar plano de ubicaciones"
+      (click)="openImage(image)"
+    >
+      <img
+        class="ticket-selector__map"
+        [src]="image"
+        [alt]="'Plano de ubicaciones de ' + title()"
+      />
+    </button>
   }
 </article>

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;
     }
   }

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');

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++);

src/index.html

@@ -1,13 +1,16 @@
 <!doctype html>
 <html lang="es">
-<head>
-  <meta charset="utf-8">
-  <title>ShopitFront</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>ShopitFront</title>
+    <base href="/" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
+    />
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>