From eb73398397833d633133f29ea6723bf4bddfe8d5 Mon Sep 17 00:00:00 2001 From: Nahuel Date: Wed, 8 Jul 2026 02:21:17 +0000 Subject: [PATCH] refactor(qrcode): replace angularx-qrcode with custom QRCodeComponent and update dependencies --- package-lock.json | 27 ++++---- package.json | 2 +- .../checkout-payment-step.component.ts | 3 +- .../components/qrcode/qrcode.component.ts | 68 +++++++++++++++++++ src/types/qrcode.d.ts | 15 ++++ 5 files changed, 97 insertions(+), 18 deletions(-) create mode 100644 src/app/shared/components/qrcode/qrcode.component.ts create mode 100644 src/types/qrcode.d.ts diff --git a/package-lock.json b/package-lock.json index 768ad2f..aad8da4 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 5f1f94a..4d80e32 100644 --- a/package.json +++ b/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" }, diff --git a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts index 4581f08..9c3f8c4 100644 --- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts +++ b/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({ diff --git a/src/app/shared/components/qrcode/qrcode.component.ts b/src/app/shared/components/qrcode/qrcode.component.ts new file mode 100644 index 0000000..21c2fa5 --- /dev/null +++ b/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: '', + 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; + + 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); + }); + } +} diff --git a/src/types/qrcode.d.ts b/src/types/qrcode.d.ts new file mode 100644 index 0000000..4d9996a --- /dev/null +++ b/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; +}