refactor(qrcode): replace angularx-qrcode with custom QRCodeComponent and update dependencies

package-lock.json

@@ -17,9 +17,9 @@
         "@angular/router": "^22.0.0",
         "@angular/ssr": "^22.0.4",
         "@fortawesome/fontawesome-free": "^7.2.0",
-        "angularx-qrcode": "^21.0.5",
         "bootstrap": "^5.3.8",
         "express": "^5.1.0",
+        "qrcode": "1.5.4",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0"
       },
@@ -3217,6 +3217,17 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.60.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.2.tgz",
@@ -4091,20 +4102,6 @@
         "node": ">= 14.0.0"
       }
     },
-    "node_modules/angularx-qrcode": {
-      "version": "21.0.5",
-      "resolved": "https://registry.npmjs.org/angularx-qrcode/-/angularx-qrcode-21.0.5.tgz",
-      "integrity": "sha512-9Kv/Mi5tKzAkBL2xhYZyPaJEoq+b24mIpUAntp16kIBiozVnpGI6DbigTPJiSDkV7EpYHdjBJNGj8igFAHEp6g==",
-      "license": "MIT",
-      "dependencies": {
-        "qrcode": "1.5.4",
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/common": "^21.0.0",
-        "@angular/core": "^21.0.0"
-      }
-    },
     "node_modules/ansi-escapes": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.3.0.tgz",

package.json

@@ -21,9 +21,9 @@
     "@angular/router": "^22.0.0",
     "@angular/ssr": "^22.0.4",
     "@fortawesome/fontawesome-free": "^7.2.0",
-    "angularx-qrcode": "^21.0.5",
     "bootstrap": "^5.3.8",
     "express": "^5.1.0",
+    "qrcode": "1.5.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },

src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts

@@ -1,9 +1,8 @@
 import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 
-import { QRCodeComponent } from 'angularx-qrcode';
-
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
+import { QRCodeComponent } from '../../../../shared/components/qrcode/qrcode.component';
 import { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
 
 @Component({

src/app/shared/components/qrcode/qrcode.component.ts

@@ -0,0 +1,68 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  ViewChild
+} from '@angular/core';
+
+import * as QRCode from 'qrcode';
+
+type QRCodeErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+
+@Component({
+  selector: 'qrcode',
+  standalone: true,
+  template: '<canvas #canvas [attr.aria-label]="ariaLabel" role="img"></canvas>',
+  styles: [
+    `
+      :host {
+        display: inline-block;
+        line-height: 0;
+      }
+
+      canvas {
+        display: block;
+        height: auto;
+        max-width: 100%;
+      }
+    `
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class QRCodeComponent implements AfterViewInit, OnChanges {
+  @Input({ required: true }) qrdata = '';
+  @Input() width = 200;
+  @Input() errorCorrectionLevel: QRCodeErrorCorrectionLevel = 'M';
+  @Input() ariaLabel = 'Codigo QR';
+
+  @ViewChild('canvas', { static: true }) private readonly canvas!: ElementRef<HTMLCanvasElement>;
+
+  private viewReady = false;
+
+  ngAfterViewInit(): void {
+    this.viewReady = true;
+    this.render();
+  }
+
+  ngOnChanges(): void {
+    this.render();
+  }
+
+  private render(): void {
+    if (!this.viewReady || !this.qrdata) {
+      return;
+    }
+
+    void QRCode.toCanvas(this.canvas.nativeElement, this.qrdata, {
+      errorCorrectionLevel: this.errorCorrectionLevel,
+      margin: 2,
+      width: this.width
+    }).catch(() => {
+      const context = this.canvas.nativeElement.getContext('2d');
+      context?.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
+    });
+  }
+}

src/types/qrcode.d.ts

@@ -0,0 +1,15 @@
+declare module 'qrcode' {
+  export type QRCodeErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+
+  export interface QRCodeToCanvasOptions {
+    errorCorrectionLevel?: QRCodeErrorCorrectionLevel;
+    margin?: number;
+    width?: number;
+  }
+
+  export function toCanvas(
+    canvasElement: HTMLCanvasElement,
+    text: string,
+    options?: QRCodeToCanvasOptions
+  ): Promise<void>;
+}