sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate cart payment modals to shared app-dialog primitive
Some checks failed
Architecture Governance / architecture (push) Has been cancelled
Details

Browse Source 
Third attempt, done properly this time - first two were reverted
(one stopped cleanly on real conflicts, one botched sequencing and
deleted the old focus-trap before finishing the swap).

DialogComponent gains closeOnEscape/closeOnBackdropClick (default true,
backward-compatible with its 13 other call sites) and ariaLabel (for
dialogs with no visible title header). FOCUSABLE_SELECTOR now includes
iframe for the bank-payment panel's focus trap.

Cart wires closeOnBackdropClick=false on both dialogs (in-flight payment
shouldn't cancel on a stray click) and closeOnEscape tied to the bank
popup's open state, so Escape closes the nested bank iframe first and
falls back to the QR view - matches the original priority exactly.

Original geometry (500px QR modal/40px padding, 960x760 bank modal/
56-16-16 padding, both mobile breakpoints) preserved via :host ::ng-deep
overrides scoped per dialog instance - same pattern already used by
product-carousel-widget.component.ts.

cart.component.ts loses ~90 lines of hand-rolled ViewChild/HostListener/
focus-trap code - app-dialog owns all of it now.

Verified live in browser: dialog sizing/padding/aria-label correct at
mobile+desktop, backdrop-click confirmed inert, Escape-priority confirmed
(bank closes first, then QR), initial focus lands on close button.
83/83 tests pass, tsc/build clean.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-08-06 11:13:33 +04:00
parent 6d075fc5b9
commit 7a2f2a452f
7 changed files with 93 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/app/pages/cart/cart.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, ChangeDetectionStrategy, signal, OnDestroy, inject, ElementRef, ViewChild, HostListener, effect } from '@angular/core';
import { Component, ChangeDetectionStrategy, signal, OnDestroy, inject } from '@angular/core';
import { DecimalPipe } from '@angular/common';
import { Router, RouterLink } from '@angular/router';
import { FormsModule } from '@angular/forms';
@@ -21,15 +21,13 @@ import { ConfigService } from '../../core/config/config.service';
import { TenantResolverService } from '../../core/config/tenant-resolver.service';
import { UserNotificationService } from '../../features/website/user-experience/services/user-notification.service';
import { ConfirmDialogComponent } from '../../shared/ui/confirm-dialog/confirm-dialog.component';
import { DialogComponent } from '../../shared/ui/dialog/dialog.component';
type PaymentMethod = 'qr' | 'card';
const MODAL_FOCUSABLE_SELECTOR =
'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), iframe, [tabindex]:not([tabindex="-1"])';
@Component({
selector: 'app-cart',
imports: [DecimalPipe, RouterLink, FormsModule, DeliverySelectorComponent, TelegramLoginComponent, LangRoutePipe, TranslatePipe, IconComponent, EmptyStateComponent, ButtonComponent, ConfirmDialogComponent],
imports: [DecimalPipe, RouterLink, FormsModule, DeliverySelectorComponent, TelegramLoginComponent, LangRoutePipe, TranslatePipe, IconComponent, EmptyStateComponent, ButtonComponent, ConfirmDialogComponent, DialogComponent],
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
@@ -82,13 +80,6 @@ export class CartComponent implements OnDestroy {
private configService = inject(ConfigService);
private tenantResolver = inject(TenantResolverService);
// Focus management for the custom payment/bank-payment modals (not
// app-dialog — they own a real multi-step state machine). Mirrors
// app-dialog's confirmed-correct focus-trap/Escape/return-focus pattern.
@ViewChild('paymentModalPanel') private paymentModalPanel?: ElementRef<HTMLElement>;
@ViewChild('bankPaymentModalPanel') private bankPaymentModalPanel?: ElementRef<HTMLElement>;
private previouslyFocusedBeforeModal: HTMLElement | null = null;
constructor(
private cartService: CartService,
private apiService: ApiService,
@@ -103,78 +94,6 @@ export class CartComponent implements OnDestroy {
this.totalWithDelivery = this.cartService.totalWithDelivery;
this.hasDeliveryPrice = this.cartService.hasDeliveryPrice;
this.allRequiredDeliveriesSelected = this.cartService.allRequiredDeliveriesSelected;
effect(() => {
const isOpen = this.showPaymentPopup();
if (isOpen) {
this.previouslyFocusedBeforeModal ??= document.activeElement as HTMLElement | null;
queueMicrotask(() => this.focusActiveModalPanel());
} else if (this.previouslyFocusedBeforeModal) {
this.previouslyFocusedBeforeModal.focus();
this.previouslyFocusedBeforeModal = null;
}
});
effect(() => {
if (this.showBankPaymentPopup()) {
queueMicrotask(() => this.focusActiveModalPanel());
}
});
}
@HostListener('document:keydown', ['$event'])
protected handleModalKeydown(event: KeyboardEvent): void {
if (!this.showPaymentPopup()) {
return;
}
if (event.key === 'Escape') {
if (this.showBankPaymentPopup()) {
this.closeBankPaymentPopup();
} else {
this.closePaymentPopup();
}
return;
}
if (event.key === 'Tab') {
this.trapModalFocus(event);
}
}
private activeModalPanel(): HTMLElement | undefined {
return this.showBankPaymentPopup()
? this.bankPaymentModalPanel?.nativeElement
: this.paymentModalPanel?.nativeElement;
}
private focusActiveModalPanel(): void {
const panel = this.activeModalPanel();
if (!panel) {
return;
}
const focusable = panel.querySelectorAll<HTMLElement>(MODAL_FOCUSABLE_SELECTOR);
(focusable[0] ?? panel).focus();
}
private trapModalFocus(event: KeyboardEvent): void {
const panel = this.activeModalPanel();
if (!panel) {
return;
}
const focusable = Array.from(panel.querySelectorAll<HTMLElement>(MODAL_FOCUSABLE_SELECTOR));
if (focusable.length === 0) {
return;
}
const first = focusable[0];
const last = focusable[focusable.length - 1];
const active = document.activeElement;
if (event.shiftKey && active === first) {
event.preventDefault();
last.focus();
} else if (!event.shiftKey && active === last) {
event.preventDefault();
first.focus();
}
}
requestLogin(): void {