@rtsee/ngx 0.0.101 → 0.0.103

package/dist/ngx/fesm2022/rtsee-ngx.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Input, Component, ViewChild, Directive, DOCUMENT, HostListener, Inject, EventEmitter, Output, forwardRef, output, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
-import { NgClass, NgIf, NgForOf, SlicePipe, NgStyle, DatePipe, NgOptimizedImage, CommonModule } from '@angular/common';
+import { NgClass, NgIf, NgForOf, DOCUMENT as DOCUMENT$1, SlicePipe, NgStyle, DatePipe, NgOptimizedImage, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Select } from 'primeng/select';
@@ -1210,11 +1210,13 @@ class PaymentProductSnippetComponent {
         this.priceSelected.emit(price);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentProductSnippetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PaymentProductSnippetComponent, isStandalone: true, selector: "rtsee-payment-product-snippet", inputs: { product: "product", theme: "theme" }, outputs: { priceSelected: "priceSelected" }, ngImport: i0, template: "<div class=\"rtsee-payment-product-snippet\">\n  <div class=\"rtsee-payment-product-card\">\n    <h3 class=\"rtsee-payment-product-header\">{{product.name}}</h3>\n    <p class=\"rtsee-payment-product-description\">{{product.description}}</p>\n    <div class=\"rtsee-payment-product-prices\">\n      @for (price of product.prices; track price.id) {\n        <div class=\"rtsee-payment-price-card\">\n          <p class=\"rtsee-payment-price-label\">{{price.label}}</p>\n          <p class=\"rtsee-payment-price-description\">{{price.description}}</p>\n          <button class=\"rtsee-payment-select-plan-btn\"\n                  (click)=\"selectPrice(price)\"\n          >Select Plan</button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PaymentProductSnippetComponent, isStandalone: true, selector: "rtsee-payment-product-snippet", inputs: { product: "product", theme: "theme" }, outputs: { priceSelected: "priceSelected" }, ngImport: i0, template: "<div class=\"rtsee-payment-product-snippet\" [ngClass]=\"product.name\">\n  <div class=\"rtsee-payment-product-card\">\n    <h3 class=\"rtsee-payment-product-header\">{{product.name}}</h3>\n    <p class=\"rtsee-payment-product-description\">{{product.description}}</p>\n    <div class=\"rtsee-payment-product-prices\">\n      @for (price of product.prices; track price.id) {\n        <div class=\"rtsee-payment-price-card\">\n          <p class=\"rtsee-payment-price-label\">{{price.label}}</p>\n          <p class=\"rtsee-payment-price-description\">{{price.description}}</p>\n          <button class=\"rtsee-payment-select-plan-btn\"\n                  (click)=\"selectPrice(price)\"\n          >Select Plan</button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentProductSnippetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rtsee-payment-product-snippet', imports: [], template: "<div class=\"rtsee-payment-product-snippet\">\n  <div class=\"rtsee-payment-product-card\">\n    <h3 class=\"rtsee-payment-product-header\">{{product.name}}</h3>\n    <p class=\"rtsee-payment-product-description\">{{product.description}}</p>\n    <div class=\"rtsee-payment-product-prices\">\n      @for (price of product.prices; track price.id) {\n        <div class=\"rtsee-payment-price-card\">\n          <p class=\"rtsee-payment-price-label\">{{price.label}}</p>\n          <p class=\"rtsee-payment-price-description\">{{price.description}}</p>\n          <button class=\"rtsee-payment-select-plan-btn\"\n                  (click)=\"selectPrice(price)\"\n          >Select Plan</button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rtsee-payment-product-snippet', imports: [
+                        NgClass
+                    ], template: "<div class=\"rtsee-payment-product-snippet\" [ngClass]=\"product.name\">\n  <div class=\"rtsee-payment-product-card\">\n    <h3 class=\"rtsee-payment-product-header\">{{product.name}}</h3>\n    <p class=\"rtsee-payment-product-description\">{{product.description}}</p>\n    <div class=\"rtsee-payment-product-prices\">\n      @for (price of product.prices; track price.id) {\n        <div class=\"rtsee-payment-price-card\">\n          <p class=\"rtsee-payment-price-label\">{{price.label}}</p>\n          <p class=\"rtsee-payment-price-description\">{{price.description}}</p>\n          <button class=\"rtsee-payment-select-plan-btn\"\n                  (click)=\"selectPrice(price)\"\n          >Select Plan</button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { product: [{
                 type: Input
             }], theme: [{
@@ -1377,10 +1379,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['checkoutContainer']
             }] } });
 
+/// <reference types="gtag.js" />
+class GtagService {
+    constructor(document) {
+        this.window = document.defaultView;
+    }
+    reportConversion(url, key) {
+        const callback = () => {
+            if (typeof url !== 'undefined' && this.window) {
+                this.window.location.href = url;
+            }
+        };
+        if (this.window && typeof this.window.gtag === 'function' && key) {
+            this.window.gtag('event', 'conversion', {
+                send_to: key,
+                value: 1.0,
+                currency: 'USD',
+                event_callback: callback,
+            });
+        }
+        else {
+            callback();
+        }
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GtagService, deps: [{ token: DOCUMENT$1 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GtagService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: GtagService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT$1]
+                }] }] });
+
 class PaymentValidationPageComponent {
-    constructor(paymentsService, router) {
+    constructor(paymentsService, gtagService) {
         this.paymentsService = paymentsService;
-        this.router = router;
+        this.gtagService = gtagService;
         this.loadInProgress = false;
         this.theme = 'dark';
         this.RTSeeTextLabelKeys = RTSeeTextLabelKeys;
@@ -1394,12 +1433,18 @@ class PaymentValidationPageComponent {
                 undefined;
         this.validatePayment();
     }
+    reportConversion(url, eventName) {
+        return this.gtagService.reportConversion(url, eventName);
+    }
     validatePayment() {
         this.paymentsService.getSession().subscribe((res) => {
             // this.messenger.closePaymentValidationPage();
             if (res.user && res.token) {
                 localStorage.setItem(LS_TOKEN_LABEL, res.token);
                 localStorage.setItem(LS_USER_LABEL, JSON.stringify(JSON.stringify(res.user)));
+                if (this.paymentsService.paymentsConfig?.gTagEventName && this.paymentsService.paymentsConfig?.isProdMode) {
+                    this.reportConversion(undefined, this.paymentsService.paymentsConfig.gTagEventName);
+                }
                 setTimeout(() => {
                     window.location.href = document.baseURI;
                 }, 1000);
@@ -1412,13 +1457,13 @@ class PaymentValidationPageComponent {
         }
         void this.init();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentValidationPageComponent, deps: [{ token: PaymentsService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentValidationPageComponent, deps: [{ token: PaymentsService }, { token: GtagService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PaymentValidationPageComponent, isStandalone: true, selector: "rtsee-payment-validation-page", inputs: { messenger: "messenger", theme: "theme" }, viewQueries: [{ propertyName: "checkoutContainer", first: true, predicate: ["checkoutContainer"], descendants: true }], ngImport: i0, template: "<div class=\"rtsee-payment-page\" [ngClass]=\"'rtsee-payment-theme-' + theme\">\n  @if (messenger.payments?.validationInProgress) {\n    <div class=\"rtsee-payment-spinner\">\n      <div class=\"rtsee-payment-spinner-ring\"></div>\n    </div>\n  }\n  <div class=\"rtsee-payment-page-footer\">\n    <button class=\"rtsee-payment-cancel-btn\"\n            (click)=\"messenger.closePaymentPage()\"\n    >{{messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]}}</button>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PaymentValidationPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rtsee-payment-validation-page', imports: [ReactiveFormsModule, NgClass], template: "<div class=\"rtsee-payment-page\" [ngClass]=\"'rtsee-payment-theme-' + theme\">\n  @if (messenger.payments?.validationInProgress) {\n    <div class=\"rtsee-payment-spinner\">\n      <div class=\"rtsee-payment-spinner-ring\"></div>\n    </div>\n  }\n  <div class=\"rtsee-payment-page-footer\">\n    <button class=\"rtsee-payment-cancel-btn\"\n            (click)=\"messenger.closePaymentPage()\"\n    >{{messenger.labels[RTSeeTextLabelKeys.CANCEL_LABEL]}}</button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: PaymentsService }, { type: i2.Router }], propDecorators: { messenger: [{
+        }], ctorParameters: () => [{ type: PaymentsService }, { type: GtagService }], propDecorators: { messenger: [{
                 type: Input
             }], theme: [{
                 type: Input
@@ -4432,5 +4477,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { EntitiesConfigurationsListComponent, EntitiesListComponent, FormComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent };
+export { EntitiesConfigurationsListComponent, EntitiesListComponent, FormComponent, GtagService, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent };
 //# sourceMappingURL=rtsee-ngx.mjs.map