@mmpay/browser 0.0.0-stage → 1.3.0

package/src/ui.ts

@@ -0,0 +1,715 @@
+import {normalizeLanguage, rememberLanguage, resolveInitialLanguage, translate} from './i18n';
+import {MMPAY_LOGO_DATA_URI} from './logo';
+import {MMPAY_STYLES} from './styles';
+import {IDesignOptions, MMPayLanguage, MMPayTerminalStatus} from './types';
+
+export interface MMPayUIHandlers {
+  /** The shopper pressed close while a payment is still pending. */
+  onCloseRequest: () => void;
+  /** The shopper confirmed they want to stop the pending payment. */
+  onCancelConfirm: () => void;
+  /** The shopper closed a finished (success, failed, expired, cancelled) screen. */
+  onDismiss: () => void;
+}
+
+export interface MMPayPaymentView {
+  merchantName: string;
+  orderId: string;
+  amount?: number;
+  vendorQrRefId?: string;
+  qr?: string;
+}
+
+export interface MMPayResultView {
+  orderId: string;
+  messageKey: string;
+  ref?: string;
+  detail?: string;
+}
+
+interface Binding {
+  node: HTMLElement;
+  key: string;
+  params?: Record<string, string>;
+  attribute?: string;
+}
+
+type Child = Node | string | null | undefined | false;
+type ScreenMode = 'closed' | 'loading' | 'qr' | 'result';
+
+const HOST_ID = 'mmpay-full-modal';
+const FONT_LINK_ID = 'mmpay-font-padauk';
+const LOGO_URL = 'https://motephoe.com/images/mmqr.webp';
+const QR_RENDER_SIZE = 480;
+
+// Pinned builds of node-qrcode 1.5.1. The integrity hashes make the browser
+// refuse a file that was altered on the CDN, which matters because the QR
+// decides where the shopper's money goes.
+const QR_LIBRARY_SOURCES = [
+  {
+    url: 'https://cdnjs.cloudflare.com/ajax/libs/qrcode/1.5.1/qrcode.min.js',
+    integrity: 'sha512-PEhlWBZBrQL7flpJPY8lXx8tIN7HWX912GzGhFTDqA3iWFrakVH3lVHomCoU9BhfKzgxfEk6EG2C3xej+9srOQ=='
+  },
+  {
+    url: 'https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.js',
+    integrity: 'sha512-hAz8pxm1kva4chZWPXQhGehvvlIj1Loka653sQXoYHNj4sgSukoR3ZKyHEOT7kFGVW17wUqD9CbKeviIJ2XFKQ=='
+  }
+];
+
+const ICONS: Record<string, string> = {
+  close: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>',
+  clock: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/></svg>',
+  download: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v11m0 0l-4-4m4 4l4-4M5 19h14"/></svg>',
+  success: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>',
+  failed: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>',
+  expired: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 7v5l3 2M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',
+  cancelled: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.6 5.6l12.8 12.8M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',
+  warning: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 9v4m0 4h.01M10.3 4.3L2.6 17.5A2 2 0 004.3 20.5h15.4a2 2 0 001.7-3L13.7 4.3a2 2 0 00-3.4 0z"/></svg>'
+};
+
+function h<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  attributes?: Record<string, string> | null,
+  ...children: Child[]
+): HTMLElementTagNameMap[K] {
+  const element = document.createElement(tag);
+  if (attributes) {
+    Object.keys(attributes).forEach(name => element.setAttribute(name, attributes[name]));
+  }
+  children.forEach(child => {
+    if (child === null || child === undefined || child === false) return;
+    element.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
+  });
+  return element;
+}
+
+/** Static, trusted SVG markup only. Never pass merchant or server data here. */
+function icon(name: string, className?: string): HTMLSpanElement {
+  const wrapper = h('span', className ? {class: className} : null);
+  wrapper.style.display = 'inline-flex';
+  wrapper.innerHTML = ICONS[name];
+  return wrapper;
+}
+
+function isQrLibrary(candidate: any): boolean {
+  return !!candidate && typeof candidate.toCanvas === 'function';
+}
+
+let qrLibraryPromise: Promise<any> | null = null;
+
+function loadQrLibrary(): Promise<any> {
+  if (qrLibraryPromise) return qrLibraryPromise;
+  const pending = new Promise<any>((resolve, reject) => {
+    const globalScope = window as any;
+    if (isQrLibrary(globalScope.QRCode)) {
+      resolve(globalScope.QRCode);
+      return;
+    }
+    // The merchant page may have its own, different `QRCode` global. Put it
+    // back after loading ours instead of deleting it.
+    const hadGlobal = 'QRCode' in globalScope;
+    const previousGlobal = globalScope.QRCode;
+    let index = 0;
+    const loadNext = () => {
+      if (index >= QR_LIBRARY_SOURCES.length) {
+        reject(new Error('QR library could not be loaded.'));
+        return;
+      }
+      const source = QR_LIBRARY_SOURCES[index++];
+      const script = document.createElement('script');
+      script.src = source.url;
+      script.integrity = source.integrity;
+      script.crossOrigin = 'anonymous';
+      script.async = true;
+      script.onload = () => {
+        const library = globalScope.QRCode;
+        if (hadGlobal) globalScope.QRCode = previousGlobal;
+        if (isQrLibrary(library)) {
+          resolve(library);
+        } else {
+          loadNext();
+        }
+      };
+      script.onerror = () => {
+        if (script.parentNode) script.parentNode.removeChild(script);
+        loadNext();
+      };
+      document.head.appendChild(script);
+    };
+    loadNext();
+  });
+  qrLibraryPromise = pending;
+  pending.catch(() => {
+    if (qrLibraryPromise === pending) qrLibraryPromise = null;
+  });
+  return pending;
+}
+
+function resolveAccent(color?: string): {background: string; text: string} | null {
+  if (!color) return null;
+  const value = color.trim();
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(value);
+  if (hex) {
+    let digits = hex[1];
+    if (digits.length === 3) digits = digits[0] + digits[0] + digits[1] + digits[1] + digits[2] + digits[2];
+    const red = parseInt(digits.substr(0, 2), 16);
+    const green = parseInt(digits.substr(2, 2), 16);
+    const blue = parseInt(digits.substr(4, 2), 16);
+    const brightness = (red * 299 + green * 587 + blue * 114) / 1000;
+    return {background: value, text: brightness > 165 ? '#000000' : '#ffffff'};
+  }
+  // Anything else must look like a plain CSS colour, so a configured value
+  // cannot smuggle extra CSS into the modal.
+  if (/^[a-z]{3,30}$/i.test(value) || /^(rgb|hsl)a?\([0-9.,%\s/]+\)$/i.test(value)) {
+    return {background: value, text: '#ffffff'};
+  }
+  return null;
+}
+
+export class MMPayUI {
+  private design: IDesignOptions;
+  private language: MMPayLanguage;
+  private handlers: MMPayUIHandlers | null = null;
+  private mode: ScreenMode = 'closed';
+  private host: HTMLDivElement | null = null;
+  private root: HTMLDivElement | null = null;
+  private card: HTMLDivElement | null = null;
+  private screen: HTMLElement | null = null;
+  private sheet: HTMLElement | null = null;
+  private closeButton: HTMLButtonElement | null = null;
+  private frameBindings: Binding[] = [];
+  private screenBindings: Binding[] = [];
+  private sheetBindings: Binding[] = [];
+  private payment: MMPayPaymentView | null = null;
+  private paymentParts: {
+    amount: HTMLElement;
+    qrBox: HTMLElement;
+    caption: HTMLElement;
+    statusRow: HTMLElement;
+    refValue: HTMLElement;
+    download: HTMLButtonElement;
+  } | null = null;
+  private countdownText: HTMLElement | null = null;
+  private timerBadge: HTMLElement | null = null;
+  private waitingBadge: HTMLElement | null = null;
+  private waitingBinding: Binding | null = null;
+  private qrCanvas: HTMLCanvasElement | null = null;
+  private previousBodyOverflow: string | null = null;
+  private previousFocus: Element | null = null;
+  private readonly onKeyDown = (event: KeyboardEvent) => this.handleKeyDown(event);
+
+  constructor(design: IDesignOptions, preferredLanguage?: string) {
+    this.design = design || {};
+    this.language = typeof window !== 'undefined' ? resolveInitialLanguage(preferredLanguage) : 'en';
+  }
+
+  public getLanguage(): MMPayLanguage {
+    return this.language;
+  }
+
+  /**
+   * The language is state of the UI, not of a screen, so it survives every
+   * screen change and is applied to whatever is rendered next.
+   */
+  public setLanguage(language: string, remember: boolean = true): void {
+    const next = normalizeLanguage(language);
+    if (!next) return;
+    this.language = next;
+    if (remember) rememberLanguage(next);
+    this.applyLanguage();
+  }
+
+  public isOpen(): boolean {
+    return this.mode !== 'closed';
+  }
+
+  public showLoading(view: MMPayPaymentView, handlers: MMPayUIHandlers): void {
+    this.handlers = handlers;
+    this.mount();
+    this.mode = 'loading';
+    this.renderPaymentScreen(view);
+    this.setCloseVisible(false);
+  }
+
+  public showQr(view: MMPayPaymentView, handlers: MMPayUIHandlers): void {
+    this.handlers = handlers;
+    this.mount();
+    // Coming from the loading state of the same order, only the placeholders
+    // are filled in, so the card does not jump or flash.
+    if (this.mode !== 'loading' || !this.payment || this.payment.orderId !== view.orderId || !this.paymentParts) {
+      this.renderPaymentScreen(view);
+    }
+    this.mode = 'qr';
+    this.payment = view;
+    this.fillPayment(view);
+    this.setCloseVisible(true);
+  }
+
+  public showResult(status: MMPayTerminalStatus, view: MMPayResultView, handlers: MMPayUIHandlers): void {
+    this.handlers = handlers;
+    this.mount();
+    this.mode = 'result';
+    this.payment = null;
+    this.paymentParts = null;
+    this.removeSheet();
+
+    const tone = status === 'SUCCESS' ? 'success' : (status === 'CANCELLED' ? 'warn' : 'danger');
+    const iconName = status === 'SUCCESS' ? 'success' : (status === 'CANCELLED' ? 'cancelled' : (status === 'EXPIRED' ? 'expired' : 'failed'));
+    const bindings: Binding[] = [];
+    const badge = icon(iconName, 'mmp-icon');
+    badge.setAttribute('data-tone', tone);
+    badge.style.display = '';
+    const screen = h('div', {class: 'mmp-screen', 'aria-live': 'polite'},
+      badge,
+      h('h2', {class: 'mmp-title', id: 'mmp-dialog-title'}, this.text(bindings, 'status.' + status)),
+      h('div', {class: 'mmp-pill'}, 'ID: ' + view.orderId),
+      h('p', {class: 'mmp-text'}, this.text(bindings, view.messageKey)),
+      view.ref ? h('p', {class: 'mmp-text'}, this.text(bindings, 'message.ref', {ref: view.ref})) : null,
+      view.detail ? h('p', {class: 'mmp-detail-text'}, view.detail) : null,
+      h('div', {class: 'mmp-actions'},
+        h('button', {class: 'mmp-btn', type: 'button', 'data-action': 'dismiss'}, this.text(bindings, 'action.close'))
+      )
+    );
+    this.swapScreen(screen, bindings);
+    this.setCloseVisible(true);
+    this.focusFirst(screen);
+  }
+
+  public showCancelConfirmation(): void {
+    if (!this.card || this.sheet || this.mode !== 'qr') return;
+    const bindings: Binding[] = [];
+    const badge = icon('warning', 'mmp-icon');
+    badge.setAttribute('data-tone', 'warn');
+    badge.style.display = '';
+    const sheet = h('div', {class: 'mmp-sheet', role: 'alertdialog', 'aria-modal': 'true'},
+      badge,
+      h('h2', {class: 'mmp-title'}, this.text(bindings, 'cancel.title')),
+      h('p', {class: 'mmp-text'}, this.text(bindings, 'cancel.body')),
+      h('div', {class: 'mmp-actions'},
+        h('button', {class: 'mmp-btn mmp-btn-danger', type: 'button', 'data-action': 'cancel-confirm'}, this.text(bindings, 'cancel.confirm')),
+        h('button', {class: 'mmp-btn mmp-btn-secondary', type: 'button', 'data-action': 'cancel-back'}, this.text(bindings, 'cancel.back'))
+      )
+    );
+    this.sheet = sheet;
+    this.sheetBindings = bindings;
+    this.card.appendChild(sheet);
+    this.setCloseVisible(false);
+    const back = sheet.querySelector('[data-action="cancel-back"]') as HTMLElement | null;
+    if (back) back.focus();
+  }
+
+  public hideCancelConfirmation(): void {
+    this.removeSheet();
+  }
+
+  public setCancelBusy(busy: boolean): void {
+    if (!this.sheet) return;
+    const buttons = this.sheet.querySelectorAll('button');
+    for (let i = 0; i < buttons.length; i++) {
+      buttons[i].disabled = busy;
+      if (buttons[i].getAttribute('data-action') === 'cancel-confirm') {
+        buttons[i].setAttribute('data-busy', busy ? 'true' : 'false');
+      }
+    }
+  }
+
+  public setCountdown(remainingSeconds: number): void {
+    if (!this.countdownText || !this.timerBadge) return;
+    const minutes = Math.floor(remainingSeconds / 60);
+    const seconds = remainingSeconds % 60;
+    this.countdownText.textContent = (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
+    this.timerBadge.setAttribute('data-urgent', remainingSeconds <= 60 ? 'true' : 'false');
+  }
+
+  public setConnectionState(state: 'live' | 'reconnecting'): void {
+    if (!this.waitingBadge || !this.waitingBinding) return;
+    if (this.waitingBadge.getAttribute('data-state') === state) return;
+    this.waitingBadge.setAttribute('data-state', state);
+    this.waitingBinding.key = state === 'live' ? 'qr.waiting' : 'qr.reconnecting';
+    this.applyBinding(this.waitingBinding);
+  }
+
+  public close(): void {
+    if (this.host && this.host.parentNode) {
+      this.host.parentNode.removeChild(this.host);
+    }
+    if (this.mode !== 'closed') {
+      document.removeEventListener('keydown', this.onKeyDown, true);
+      if (this.previousBodyOverflow !== null) {
+        document.body.style.overflow = this.previousBodyOverflow;
+        this.previousBodyOverflow = null;
+      }
+      const previous = this.previousFocus as HTMLElement | null;
+      if (previous && typeof previous.focus === 'function' && document.contains(previous)) {
+        try {
+          previous.focus();
+        } catch (e) { }
+      }
+    }
+    this.mode = 'closed';
+    this.host = this.root = this.card = null;
+    this.screen = this.sheet = null;
+    this.closeButton = null;
+    this.payment = null;
+    this.paymentParts = null;
+    this.countdownText = this.timerBadge = this.waitingBadge = null;
+    this.waitingBinding = null;
+    this.qrCanvas = null;
+    this.previousFocus = null;
+    this.frameBindings = [];
+    this.screenBindings = [];
+    this.sheetBindings = [];
+    this.handlers = null;
+  }
+
+  private mount(): void {
+    if (this.host && this.host.parentNode) return;
+    const stale = document.getElementById(HOST_ID);
+    if (stale && stale.parentNode) stale.parentNode.removeChild(stale);
+
+    const host = document.createElement('div');
+    host.id = HOST_ID;
+    host.style.cssText = 'all: initial; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2147483000; display: block;';
+    const container: ShadowRoot | HTMLElement = typeof host.attachShadow === 'function' ? host.attachShadow({mode: 'open'}) : host;
+
+    const style = document.createElement('style');
+    style.textContent = MMPAY_STYLES;
+    container.appendChild(style);
+
+    const mode = this.design.mode || 'light';
+    const prefersDark = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const isDark = mode === 'auto' ? prefersDark : mode.indexOf('dark') !== -1;
+    const root = h('div', {class: 'mmp-root' + (isDark ? ' mmp-dark' : '') + (mode.indexOf('translucent') !== -1 ? ' mmp-translucent' : '')});
+    const accent = resolveAccent(this.design.color);
+    if (accent) {
+      root.style.setProperty('--mmp-accent', accent.background);
+      root.style.setProperty('--mmp-accent-text', accent.text);
+    }
+
+    this.frameBindings = [];
+    const languageGroup = h('div', {class: 'mmp-lang', role: 'group'},
+      h('button', {type: 'button', 'data-action': 'language', 'data-language': 'en', lang: 'en'}, 'EN'),
+      h('button', {type: 'button', 'data-action': 'language', 'data-language': 'mm', lang: 'my'}, 'မြန်မာ')
+    );
+    this.frameBindings.push({node: languageGroup, key: 'action.language', attribute: 'aria-label'});
+    const closeButton = h('button', {class: 'mmp-close', type: 'button', 'data-action': 'close'});
+    closeButton.appendChild(icon('close'));
+    this.frameBindings.push({node: closeButton, key: 'action.close', attribute: 'aria-label'});
+
+    const card = h('div', {class: 'mmp-card', role: 'dialog', 'aria-modal': 'true', 'aria-labelledby': 'mmp-dialog-title', tabindex: '-1'},
+      h('div', {class: 'mmp-topbar'}, languageGroup, closeButton)
+    );
+    root.appendChild(card);
+    container.appendChild(root);
+    root.addEventListener('click', event => this.handleClick(event));
+
+    this.host = host;
+    this.root = root;
+    this.card = card;
+    this.closeButton = closeButton;
+    this.screen = null;
+
+    this.previousFocus = document.activeElement;
+    this.previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    document.body.appendChild(host);
+    document.addEventListener('keydown', this.onKeyDown, true);
+    this.ensureFont();
+    this.applyLanguage();
+    card.focus();
+  }
+
+  private renderPaymentScreen(view: MMPayPaymentView): void {
+    this.removeSheet();
+    const bindings: Binding[] = [];
+    const logo = h('img', {src: LOGO_URL, alt: 'MMQR', decoding: 'async'});
+    logo.onerror = () => {
+      logo.style.display = 'none';
+    };
+
+    const amount = h('div', {class: 'mmp-amount'});
+    const qrBox = h('div', {class: 'mmp-qr'});
+    const caption = h('div', {class: 'mmp-caption', 'aria-live': 'polite'});
+    const statusRow = h('div', {class: 'mmp-status-row'});
+    const refValue = h('strong');
+    const download = h('button', {class: 'mmp-btn', type: 'button', 'data-action': 'download'},
+      icon('download'),
+      this.text(bindings, 'qr.download')
+    );
+    download.disabled = true;
+
+    const screen = h('div', {class: 'mmp-screen'},
+      h('div', {class: 'mmp-brand'}, logo),
+      h('div', {class: 'mmp-merchant', id: 'mmp-dialog-title'}, view.merchantName),
+      amount,
+      qrBox,
+      caption,
+      statusRow,
+      h('div', {class: 'mmp-details'},
+        h('div', {class: 'mmp-detail'}, h('span', null, this.text(bindings, 'qr.orderId')), h('strong', null, view.orderId)),
+        h('div', {class: 'mmp-detail'}, h('span', null, this.text(bindings, 'qr.refNo')), refValue)
+      ),
+      download,
+      h('div', {class: 'mmp-powered'}, this.text(bindings, 'qr.poweredBy'))
+    );
+
+    this.payment = view;
+    this.paymentParts = {amount, qrBox, caption, statusRow, refValue, download};
+    this.countdownText = this.timerBadge = this.waitingBadge = null;
+    this.waitingBinding = null;
+    this.qrCanvas = null;
+    this.swapScreen(screen, bindings);
+
+    this.setAmount(view.amount);
+    this.showQrPlaceholder();
+    refValue.appendChild(h('span', {class: 'mmp-skeleton', style: 'width: 110px;'}));
+    caption.appendChild(h('div', {class: 'mmp-caption-title'}, this.text(this.screenBindings, 'loading.title')));
+    caption.appendChild(h('div', {class: 'mmp-caption-sub'}, this.text(this.screenBindings, 'loading.subtitle')));
+    statusRow.style.visibility = 'hidden';
+    statusRow.appendChild(h('span', {class: 'mmp-timer'}, '00:00'));
+  }
+
+  private fillPayment(view: MMPayPaymentView): void {
+    const parts = this.paymentParts;
+    if (!parts) return;
+    this.setAmount(view.amount);
+
+    parts.refValue.textContent = view.vendorQrRefId || '-';
+
+    this.clear(parts.caption);
+    parts.caption.appendChild(h('div', {class: 'mmp-hint'}, this.text(this.screenBindings, 'qr.scanHint')));
+
+    this.clear(parts.statusRow);
+    parts.statusRow.style.visibility = '';
+    const waitingText = this.text(this.screenBindings, 'qr.waiting');
+    this.waitingBinding = this.screenBindings[this.screenBindings.length - 1];
+    this.waitingBadge = h('span', {class: 'mmp-waiting', 'data-state': 'live', role: 'status'}, h('span', {class: 'mmp-dot'}), waitingText);
+    this.countdownText = h('span', null, '--:--');
+    this.timerBadge = h('span', {class: 'mmp-timer', 'data-urgent': 'false'}, icon('clock'), this.countdownText);
+    parts.statusRow.appendChild(this.waitingBadge);
+    parts.statusRow.appendChild(this.timerBadge);
+
+    this.renderQr();
+  }
+
+  private setAmount(amount?: number): void {
+    const parts = this.paymentParts;
+    if (!parts) return;
+    this.clear(parts.amount);
+    if (typeof amount === 'number' && isFinite(amount)) {
+      const formatted = amount.toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
+      parts.amount.appendChild(h('span', {class: 'mmp-amount-value'}, formatted));
+      parts.amount.appendChild(h('span', {class: 'mmp-amount-currency'}, 'MMK'));
+    } else {
+      parts.amount.appendChild(h('span', {class: 'mmp-skeleton', style: 'width: 150px; height: 26px; border-radius: 9px;'}));
+    }
+  }
+
+  private showQrPlaceholder(): void {
+    const parts = this.paymentParts;
+    if (!parts) return;
+    this.clear(parts.qrBox);
+    const logo = h('img', {class: 'mmp-loader-logo', src: MMPAY_LOGO_DATA_URI, alt: 'MyanMyanPay'});
+    parts.qrBox.appendChild(h('div', {class: 'mmp-qr-placeholder'},
+      logo,
+      h('div', {class: 'mmp-loader-track', 'aria-hidden': 'true'}, h('div', {class: 'mmp-loader-bar'}))
+    ));
+  }
+
+  private renderQr(): void {
+    const parts = this.paymentParts;
+    const view = this.payment;
+    if (!parts || !view || !view.qr) return;
+    const qrData = view.qr;
+    const isCurrent = () => this.paymentParts === parts && this.payment === view;
+    const fail = () => {
+      if (!isCurrent()) return;
+      this.qrCanvas = null;
+      parts.download.disabled = true;
+      this.clear(parts.qrBox);
+      // The bindings of an earlier failed attempt point at removed nodes.
+      this.screenBindings = this.screenBindings.filter(binding => binding.key !== 'qr.loadFailed' && binding.key !== 'qr.retry');
+      parts.qrBox.appendChild(h('div', {class: 'mmp-qr-error', role: 'alert'},
+        this.text(this.screenBindings, 'qr.loadFailed'),
+        h('button', {type: 'button', 'data-action': 'retry-qr'}, this.text(this.screenBindings, 'qr.retry'))
+      ));
+    };
+    loadQrLibrary().then(library => {
+      if (!isCurrent()) return;
+      const canvas = document.createElement('canvas');
+      library.toCanvas(canvas, qrData, {
+        width: QR_RENDER_SIZE,
+        margin: 1,
+        color: {dark: '#000000', light: '#ffffff'},
+        errorCorrectionLevel: 'M'
+      }, (error: unknown) => {
+        if (error) {
+          fail();
+          return;
+        }
+        if (!isCurrent()) return;
+        canvas.setAttribute('role', 'img');
+        canvas.setAttribute('aria-label', 'MMQR');
+        this.clear(parts.qrBox);
+        parts.qrBox.appendChild(canvas);
+        this.qrCanvas = canvas;
+        parts.download.disabled = false;
+      });
+    }).catch(fail);
+  }
+
+  private downloadQr(): void {
+    if (!this.qrCanvas || !this.payment) return;
+    try {
+      const link = document.createElement('a');
+      link.href = this.qrCanvas.toDataURL('image/png');
+      link.download = 'MMPay-QR-' + this.payment.orderId.replace(/[^a-zA-Z0-9_-]/g, '') + '.png';
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch (e) { }
+  }
+
+  private handleClick(event: Event): void {
+    let target = event.target as HTMLElement | null;
+    while (target && target !== this.root && !(target.getAttribute && target.getAttribute('data-action'))) {
+      target = target.parentNode as HTMLElement | null;
+    }
+    if (!target || target === this.root || !this.handlers) return;
+    if ((target as HTMLButtonElement).disabled) return;
+    const action = target.getAttribute('data-action');
+    if (action === 'language') {
+      this.setLanguage(target.getAttribute('data-language') || 'en');
+    } else if (action === 'close') {
+      this.requestClose();
+    } else if (action === 'dismiss') {
+      this.handlers.onDismiss();
+    } else if (action === 'cancel-confirm') {
+      this.handlers.onCancelConfirm();
+    } else if (action === 'cancel-back') {
+      this.hideCancelConfirmation();
+    } else if (action === 'download') {
+      this.downloadQr();
+    } else if (action === 'retry-qr') {
+      this.showQrPlaceholder();
+      this.renderQr();
+    }
+  }
+
+  private requestClose(): void {
+    if (!this.handlers) return;
+    if (this.mode === 'result') {
+      this.handlers.onDismiss();
+    } else if (this.mode === 'qr') {
+      this.handlers.onCloseRequest();
+    }
+  }
+
+  private handleKeyDown(event: KeyboardEvent): void {
+    if (this.mode === 'closed') return;
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      event.stopPropagation();
+      if (this.sheet) {
+        const confirm = this.sheet.querySelector('[data-action="cancel-confirm"]') as HTMLButtonElement | null;
+        if (!confirm || !confirm.disabled) this.hideCancelConfirmation();
+      } else {
+        this.requestClose();
+      }
+      return;
+    }
+    if (event.key !== 'Tab' || !this.card) return;
+    // Keep keyboard focus inside the modal while it is open.
+    const scope: HTMLElement = this.sheet || this.card;
+    const candidates = scope.querySelectorAll('button');
+    const focusable: HTMLElement[] = [];
+    for (let i = 0; i < candidates.length; i++) {
+      const button = candidates[i];
+      if (!button.disabled && !button.hidden) focusable.push(button);
+    }
+    if (focusable.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const shadow = this.host && this.host.shadowRoot;
+    const active = (shadow ? shadow.activeElement : document.activeElement) as HTMLElement | null;
+    const index = active ? focusable.indexOf(active) : -1;
+    event.preventDefault();
+    const nextIndex = event.shiftKey
+      ? (index <= 0 ? focusable.length - 1 : index - 1)
+      : (index === -1 || index === focusable.length - 1 ? 0 : index + 1);
+    focusable[nextIndex].focus();
+  }
+
+  private swapScreen(screen: HTMLElement, bindings: Binding[]): void {
+    if (!this.card) return;
+    if (this.screen && this.screen.parentNode) this.screen.parentNode.removeChild(this.screen);
+    this.card.appendChild(screen);
+    this.screen = screen;
+    this.screenBindings = bindings;
+  }
+
+  private removeSheet(): void {
+    if (this.sheet && this.sheet.parentNode) this.sheet.parentNode.removeChild(this.sheet);
+    const hadSheet = !!this.sheet;
+    this.sheet = null;
+    this.sheetBindings = [];
+    if (hadSheet && this.card && this.mode !== 'closed') {
+      this.setCloseVisible(true);
+      this.card.focus();
+    }
+  }
+
+  private setCloseVisible(visible: boolean): void {
+    if (this.closeButton) this.closeButton.hidden = !visible;
+  }
+
+  private focusFirst(scope: HTMLElement): void {
+    const button = scope.querySelector('button') as HTMLElement | null;
+    if (button) button.focus();
+  }
+
+  private clear(element: HTMLElement): void {
+    while (element.firstChild) element.removeChild(element.firstChild);
+  }
+
+  /** Creates a text node holder that is re-translated whenever the language changes. */
+  private text(bindings: Binding[], key: string, params?: Record<string, string>): HTMLSpanElement {
+    const node = h('span');
+    const binding: Binding = {node, key, params};
+    bindings.push(binding);
+    this.applyBinding(binding);
+    return node;
+  }
+
+  private applyBinding(binding: Binding): void {
+    const value = translate(this.language, binding.key, binding.params);
+    if (binding.attribute) {
+      binding.node.setAttribute(binding.attribute, value);
+    } else {
+      binding.node.textContent = value;
+    }
+  }
+
+  private applyLanguage(): void {
+    if (!this.root) return;
+    this.root.setAttribute('data-lang', this.language);
+    this.root.setAttribute('lang', this.language === 'mm' ? 'my' : 'en');
+    const toggles = this.root.querySelectorAll('[data-action="language"]');
+    for (let i = 0; i < toggles.length; i++) {
+      toggles[i].setAttribute('aria-pressed', toggles[i].getAttribute('data-language') === this.language ? 'true' : 'false');
+    }
+    this.frameBindings.forEach(binding => this.applyBinding(binding));
+    this.screenBindings.forEach(binding => this.applyBinding(binding));
+    this.sheetBindings.forEach(binding => this.applyBinding(binding));
+  }
+
+  /** Web fonts must be declared in the page itself to be usable inside a shadow root. */
+  private ensureFont(): void {
+    if (document.getElementById(FONT_LINK_ID)) return;
+    const link = document.createElement('link');
+    link.id = FONT_LINK_ID;
+    link.rel = 'stylesheet';
+    link.href = 'https://fonts.googleapis.com/css2?family=Padauk:wght@400;700&display=swap';
+    document.head.appendChild(link);
+  }
+}