tickera-angular-components 0.0.1-dev.188 → 0.0.1-dev.190

package/fesm2022/tickera-angular-components.mjs

@@ -547,6 +547,8 @@ const PERFORMANCES_API_ROUTES = {
     seatEventsTicketAdmin: (id) => `/performances/${id}/seat-events/ticket/admin`,
     seatEvents: (id) => `/performances/${id}/seat-events`,
     myQrToken: (ticketUuid) => `/performances/tickets/${ticketUuid}/my-qr-token`,
+    ticketPdf: (ticketUuid) => `/performances/tickets/${ticketUuid}/pdf`,
+    myTicketPdf: (ticketUuid) => `/performances/tickets/${ticketUuid}/my-pdf`,
 };
 
 const PRICE_ZONES_API_ROUTES = {
@@ -2657,6 +2659,12 @@ class ApiService {
             .get(`${this.apiUrl}${path}`, { headers })
             .pipe(catchError(this.handleError.bind(this)));
     }
+    getBlob(path) {
+        const headers = this.getHeaders(undefined);
+        return this.http
+            .get(`${this.apiUrl}${path}`, { headers, responseType: 'blob' })
+            .pipe(catchError(this.handleError.bind(this)));
+    }
     post(path, body) {
         const headers = this.getHeaders(this.validateContentType(body));
         return this.http
@@ -4843,6 +4851,12 @@ class TicketQrService {
     fetchMyQrToken(ticketUuid) {
         return this.apiService.get(PERFORMANCES_API_ROUTES.myQrToken(ticketUuid));
     }
+    downloadTicketPdf(ticketUuid) {
+        return this.apiService.getBlob(PERFORMANCES_API_ROUTES.ticketPdf(ticketUuid));
+    }
+    downloadMyTicketPdf(ticketUuid) {
+        return this.apiService.getBlob(PERFORMANCES_API_ROUTES.myTicketPdf(ticketUuid));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TicketQrService, deps: [{ token: ApiService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TicketQrService, providedIn: 'root' });
 }
@@ -10501,6 +10515,7 @@ class TicketQrComponent {
     error = signal(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
     refreshing = signal(false, ...(ngDevMode ? [{ debugName: "refreshing" }] : []));
     countdown = signal(0, ...(ngDevMode ? [{ debugName: "countdown" }] : []));
+    downloading = signal(false, ...(ngDevMode ? [{ debugName: "downloading" }] : []));
     destroy$ = new Subject();
     refreshTimeout = null;
     countdownInterval = null;
@@ -10545,6 +10560,28 @@ class TicketQrComponent {
         this.clearTimers();
         this.fetchAndRender();
     }
+    downloadPdf() {
+        if (!isPlatformBrowser(this.platformId) || this.downloading())
+            return;
+        this.downloading.set(true);
+        const request = this.isCustomer
+            ? this.ticketQrService.downloadMyTicketPdf(this.ticketUuid)
+            : this.ticketQrService.downloadTicketPdf(this.ticketUuid);
+        request.pipe(takeUntil$1(this.destroy$)).subscribe({
+            next: (blob) => {
+                this.downloading.set(false);
+                const url = URL.createObjectURL(blob);
+                const anchor = document.createElement('a');
+                anchor.href = url;
+                anchor.download = `boleta-${this.ticketUuid}.pdf`;
+                document.body.appendChild(anchor);
+                anchor.click();
+                anchor.remove();
+                URL.revokeObjectURL(url);
+            },
+            error: () => this.downloading.set(false),
+        });
+    }
     clearTimers() {
         if (this.refreshTimeout) {
             clearTimeout(this.refreshTimeout);
@@ -10623,11 +10660,11 @@ class TicketQrComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TicketQrComponent, deps: [{ token: TicketQrService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TicketQrComponent, isStandalone: true, selector: "performance-ticket-qr", inputs: { ticketUuid: "ticketUuid", isCustomer: "isCustomer" }, viewQueries: [{ propertyName: "qrCanvas", first: true, predicate: ["qrCanvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ticket-qr\">\n  @if (loading()) {\n    <div class=\"ticket-qr__loader\">\n      <span class=\"ticket-qr__loader-text\">Cargando QR...</span>\n    </div>\n  }\n\n  @if (error()) {\n    <div class=\"ticket-qr__container\">\n      <app-alert text=\"Error al cargar el c\u00F3digo QR\" type=\"error\" />\n      <app-button text=\"Reintentar\" (clicked)=\"retry()\" [disabled]=\"loading()\" />\n    </div>\n  }\n\n  <div [class.hidden]=\"loading() || error()\" class=\"ticket-qr__container\">\n    <div class=\"transition-opacity duration-300\" [class.opacity-50]=\"refreshing()\">\n      <canvas #qrCanvas class=\"ticket-qr__canvas\" width=\"256\" height=\"256\"></canvas>\n    </div>\n    <span class=\"ticket-qr__updating-text\">\n      {{ countdown() > 0 ? `Actualizando en ${countdown()}` : '0s' }}\n    </span>\n  </div>\n</div>\n", styles: [".ticket-qr{align-items:center;display:flex;flex-flow:column nowrap;gap:.75rem;height:auto;padding:1rem;width:100%}.ticket-qr__loader{align-items:center;background-color:#f3f4f6;border-radius:.5rem;display:flex;flex-flow:column nowrap;height:16rem;justify-content:center;width:16rem}.ticket-qr__loader-text{color:#9ca3af;font-size:.875rem}.ticket-qr__container{align-items:center;display:flex;flex-flow:column nowrap;gap:.75rem;width:100%}.ticket-qr__container.hidden{display:none}.ticket-qr__canvas{box-shadow:0 0 10px #0003;border-radius:.5rem}.ticket-qr__updating-text{color:#9ca3af;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TicketQrComponent, isStandalone: true, selector: "performance-ticket-qr", inputs: { ticketUuid: "ticketUuid", isCustomer: "isCustomer" }, viewQueries: [{ propertyName: "qrCanvas", first: true, predicate: ["qrCanvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"ticket-qr\">\n  @if (loading()) {\n    <div class=\"ticket-qr__loader\">\n      <span class=\"ticket-qr__loader-text\">Cargando QR...</span>\n    </div>\n  }\n\n  @if (error()) {\n    <div class=\"ticket-qr__container\">\n      <app-alert text=\"Error al cargar el c\u00F3digo QR\" type=\"error\" />\n      <app-button text=\"Reintentar\" (clicked)=\"retry()\" [disabled]=\"loading()\" />\n    </div>\n  }\n\n  <div [class.hidden]=\"loading() || error()\" class=\"ticket-qr__container\">\n    <div class=\"transition-opacity duration-300\" [class.opacity-50]=\"refreshing()\">\n      <canvas #qrCanvas class=\"ticket-qr__canvas\" width=\"256\" height=\"256\"></canvas>\n    </div>\n    <span class=\"ticket-qr__updating-text\">\n      {{ countdown() > 0 ? `Actualizando en ${countdown()}` : '0s' }}\n    </span>\n    <app-button\n      text=\"Descargar QR en PDF\"\n      [disabled]=\"loading() || downloading()\"\n      (clicked)=\"downloadPdf()\"\n    />\n  </div>\n</div>\n", styles: [".ticket-qr{align-items:center;display:flex;flex-flow:column nowrap;gap:.75rem;height:auto;padding:1rem;width:100%}.ticket-qr__loader{align-items:center;background-color:#f3f4f6;border-radius:.5rem;display:flex;flex-flow:column nowrap;height:16rem;justify-content:center;width:16rem}.ticket-qr__loader-text{color:#9ca3af;font-size:.875rem}.ticket-qr__container{align-items:center;display:flex;flex-flow:column nowrap;gap:.75rem;width:100%}.ticket-qr__container.hidden{display:none}.ticket-qr__canvas{box-shadow:0 0 10px #0003;border-radius:.5rem}.ticket-qr__updating-text{color:#9ca3af;font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TicketQrComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'performance-ticket-qr', standalone: true, imports: [CommonModule, AppButtonComponent, AppAlertComponent], template: "<div class=\"ticket-qr\">\n  @if (loading()) {\n    <div class=\"ticket-qr__loader\">\n      <span class=\"ticket-qr__loader-text\">Cargando QR...</span>\n    </div>\n  }\n\n  @if (error()) {\n    <div class=\"ticket-qr__container\">\n      <app-alert text=\"Error al cargar el c\u00F3digo QR\" type=\"error\" />\n      <app-button text=\"Reintentar\" (clicked)=\"retry()\" [disabled]=\"loading()\" />\n    </div>\n  }\n\n  <div [class.hidden]=\"loading() || error()\" class=\"ticket-qr__container\">\n    <div class=\"transition-opacity duration-300\" [class.opacity-50]=\"refreshing()\">\n      <canvas #qrCanvas class=\"ticket-qr__canvas\" width=\"256\" height=\"256\"></canvas>\n    </div>\n    <span class=\"ticket-qr__updating-text\">\n      {{ countdown() > 0 ? `Actualizando en ${countdown()}` : '0s' }}\n    </span>\n  </div>\n</div>\n", styles: [".ticket-qr{align-items:center;display:flex;flex-flow:column nowrap;gap:.75rem;height:auto;padding:1rem;width:100%}.ticket-qr__loader{align-items:center;background-color:#f3f4f6;border-radius:.5rem;display:flex;flex-flow:column nowrap;height:16rem;justify-content:center;width:16rem}.ticket-qr__loader-text{color:#9ca3af;font-size:.875rem}.ticket-qr__container{align-items:center;display:flex;flex-flow:column nowrap;gap:.75rem;width:100%}.ticket-qr__container.hidden{display:none}.ticket-qr__canvas{box-shadow:0 0 10px #0003;border-radius:.5rem}.ticket-qr__updating-text{color:#9ca3af;font-size:.875rem}\n"] }]
+            args: [{ selector: 'performance-ticket-qr', standalone: true, imports: [CommonModule, AppButtonComponent, AppAlertComponent], template: "<div class=\"ticket-qr\">\n  @if (loading()) {\n    <div class=\"ticket-qr__loader\">\n      <span class=\"ticket-qr__loader-text\">Cargando QR...</span>\n    </div>\n  }\n\n  @if (error()) {\n    <div class=\"ticket-qr__container\">\n      <app-alert text=\"Error al cargar el c\u00F3digo QR\" type=\"error\" />\n      <app-button text=\"Reintentar\" (clicked)=\"retry()\" [disabled]=\"loading()\" />\n    </div>\n  }\n\n  <div [class.hidden]=\"loading() || error()\" class=\"ticket-qr__container\">\n    <div class=\"transition-opacity duration-300\" [class.opacity-50]=\"refreshing()\">\n      <canvas #qrCanvas class=\"ticket-qr__canvas\" width=\"256\" height=\"256\"></canvas>\n    </div>\n    <span class=\"ticket-qr__updating-text\">\n      {{ countdown() > 0 ? `Actualizando en ${countdown()}` : '0s' }}\n    </span>\n    <app-button\n      text=\"Descargar QR en PDF\"\n      [disabled]=\"loading() || downloading()\"\n      (clicked)=\"downloadPdf()\"\n    />\n  </div>\n</div>\n", styles: [".ticket-qr{align-items:center;display:flex;flex-flow:column nowrap;gap:.75rem;height:auto;padding:1rem;width:100%}.ticket-qr__loader{align-items:center;background-color:#f3f4f6;border-radius:.5rem;display:flex;flex-flow:column nowrap;height:16rem;justify-content:center;width:16rem}.ticket-qr__loader-text{color:#9ca3af;font-size:.875rem}.ticket-qr__container{align-items:center;display:flex;flex-flow:column nowrap;gap:.75rem;width:100%}.ticket-qr__container.hidden{display:none}.ticket-qr__canvas{box-shadow:0 0 10px #0003;border-radius:.5rem}.ticket-qr__updating-text{color:#9ca3af;font-size:.875rem}\n"] }]
         }], ctorParameters: () => [{ type: TicketQrService }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]