+
diff --git a/src/app/authentication/scan-pay/scan-pay.component.ts b/src/app/authentication/scan-pay/scan-pay.component.ts
new file mode 100644
index 0000000000..0bb836d8b4
--- /dev/null
+++ b/src/app/authentication/scan-pay/scan-pay.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { AbstractTabComponent } from 'shared/component/abstract-tab/abstract-tab.component';
+
+import { AuthorizationService } from '../../services/authorization.service';
+import { ComponentService } from '../../services/component.service';
+import { WindowService } from '../../services/window.service';
+import { TenantComponents } from '../../types/Tenant';
+
+@Component({
+ selector: 'app-scan-pay',
+ templateUrl: 'scan-pay.component.html',
+})
+export class ScanPayComponent extends AbstractTabComponent{
+ @Input() public transactionID!: number;
+
+ public canListTransactions: boolean;
+ public canRefundTransaction: boolean;
+ public canListTransactionsInError: boolean;
+
+ public constructor(
+ activatedRoute: ActivatedRoute, windowService: WindowService) {
+ super(activatedRoute, windowService, ['all']);
+ }
+}
diff --git a/src/app/authentication/scan-pay/show-transaction/scan-pay-show-transaction.component.html b/src/app/authentication/scan-pay/show-transaction/scan-pay-show-transaction.component.html
new file mode 100644
index 0000000000..b0c095ae47
--- /dev/null
+++ b/src/app/authentication/scan-pay/show-transaction/scan-pay-show-transaction.component.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/authentication/scan-pay/show-transaction/scan-pay-show-transaction.component.ts b/src/app/authentication/scan-pay/show-transaction/scan-pay-show-transaction.component.ts
new file mode 100644
index 0000000000..dd38295b2d
--- /dev/null
+++ b/src/app/authentication/scan-pay/show-transaction/scan-pay-show-transaction.component.ts
@@ -0,0 +1,140 @@
+import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+
+import { AuthorizationService } from '../../../services/authorization.service';
+import { CentralServerService } from '../../../services/central-server.service';
+import { SpinnerService } from '../../../services/spinner.service';
+import { TransactionHeaderComponent } from '../../../shared/dialogs/transaction/header/transaction-header.component';
+import { Transaction } from '../../../types/Transaction';
+import { User } from '../../../types/User';
+
+@Component({
+ selector: 'app-scan-pay-show-transaction',
+ templateUrl: 'scan-pay-show-transaction.component.html',
+})
+export class ScanPayShowTransactionComponent implements OnInit, OnDestroy {
+ @ViewChild('transactionHeader') public transactionHeader!: TransactionHeaderComponent;
+
+ @Input() public transactionID!: number;
+
+ public currentTransactionID!: number;
+ public transaction: Transaction;
+ public isSendClicked: boolean;
+ public token: string;
+ public user: Partial
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{message | translate}}
+ +
+
diff --git a/src/app/authentication/scan-pay/stripe/scan-pay-stripe-payment-intent.component.scss b/src/app/authentication/scan-pay/stripe/scan-pay-stripe-payment-intent.component.scss
new file mode 100644
index 0000000000..acae8ca62d
--- /dev/null
+++ b/src/app/authentication/scan-pay/stripe/scan-pay-stripe-payment-intent.component.scss
@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@import '../../../../assets/scss/core/variables/theme';
+@import '../../../../assets/scss/core/variables/brand';
+
+.stripe-payment-method-dialog-size {
+ max-width: 500px;
+ max-height: 550px;
+}
+
+.payment-method-user-consent {
+ padding: 1em 1.5em;
+ margin: 1.5em 0em;
+ background: $brand-warning;
+ color: mat.get-color-from-palette($app-grey, 50);
+ text-align: justify;
+}
+
+#prepaymentMessage {
+ font-size: 0.9em;
+ margin-top: 0.5em;
+}
\ No newline at end of file
diff --git a/src/app/authentication/scan-pay/stripe/scan-pay-stripe-payment-intent.component.ts b/src/app/authentication/scan-pay/stripe/scan-pay-stripe-payment-intent.component.ts
new file mode 100644
index 0000000000..4055c21205
--- /dev/null
+++ b/src/app/authentication/scan-pay/stripe/scan-pay-stripe-payment-intent.component.ts
@@ -0,0 +1,235 @@
+import { Component, OnInit } from '@angular/core';
+import { UntypedFormGroup } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { PaymentIntent, PaymentIntentResult, StripeElementLocale, StripeElements, StripeElementsOptions, StripePaymentElement } from '@stripe/stripe-js';
+import { AppCurrencyPipe } from 'shared/formatters/app-currency.pipe';
+
+import { AuthorizationService } from '../../../services/authorization.service';
+import { CentralServerService } from '../../../services/central-server.service';
+import { ComponentService } from '../../../services/component.service';
+import { Locale, LocaleService } from '../../../services/locale.service';
+import { SpinnerService } from '../../../services/spinner.service';
+import { StripeService } from '../../../services/stripe.service';
+import { WindowService } from '../../../services/window.service';
+import { HTTPError } from '../../../types/HTTPError';
+import { TenantComponents } from '../../../types/Tenant';
+import { User } from '../../../types/User';
+
+@Component({
+ selector: 'app-scan-pay-stripe-payment-intent',
+ templateUrl: 'scan-pay-stripe-payment-intent.component.html',
+ styleUrls: ['scan-pay-stripe-payment-intent.component.scss']
+})
+export class ScanPayStripePaymentIntentComponent implements OnInit {
+ public formGroup!: UntypedFormGroup;
+ public isBillingComponentActive: boolean;
+ public locale: Locale;
+ public email: string;
+ public name: string;
+ public firstName: string;
+ public chargingStationID: string;
+ public connectorID: number;
+ public token: string;
+ public isSendClicked = false;
+ public showButton = true;
+ public isTokenValid = true;
+ public headerClass = 'card-header-primary';
+ public title = 'settings.scan_pay.payment_intent.create_title';
+ public message: string;
+ // Stripe elements
+ public elements: StripeElements;
+ public paymentElement: StripePaymentElement;
+ public paymentIntent: PaymentIntent;
+ public prepaymentMessage: string;
+
+ public constructor(
+ private centralServerService: CentralServerService,
+ private componentService: ComponentService,
+ private spinnerService: SpinnerService,
+ private stripeService: StripeService,
+ private localeService: LocaleService,
+ public translateService: TranslateService,
+ public windowService: WindowService,
+ public authorizationService: AuthorizationService,
+ private appCurrencyPipe: AppCurrencyPipe) {
+ this.isBillingComponentActive = this.componentService.isActive(TenantComponents.BILLING);
+ }
+
+ public ngOnInit(): void {
+ this.token = this.windowService.getUrlParameterValue('VerificationToken');
+ this.email = this.windowService.getUrlParameterValue('email');
+ this.name = this.windowService.getUrlParameterValue('name');
+ this.firstName = this.windowService.getUrlParameterValue('firstName');
+ this.chargingStationID = this.windowService.getUrlParameterValue('chargingStationID');
+ this.connectorID = +this.windowService.getUrlParameterValue('connectorID');
+ this.localeService.getCurrentLocaleSubject().subscribe((locale) => {
+ this.locale = locale;
+ });
+ void this.initialize();
+ }
+
+ public linkCardToAccount() {
+ this.showButton = false;
+ void this.doConfirmPaymentIntent();
+ }
+
+ private initialize() {
+ // Allows to show an error if user delete subdomain in the url
+ if (!this.isBillingComponentActive) {
+ this.headerClass = 'card-header-danger';
+ this.title = 'settings.scan_pay.unexpected_error_title';
+ this.message = 'settings.scan_pay.billing_not_properly_set';
+ this.isSendClicked = true;
+ }
+ try {
+ this.spinnerService.show();
+ const user = { email: this.email, password: this.token, acceptEula: true } as Partial
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{message | translate}}
+ +{{"general.version" | translate}} {{version}}
-
diff --git a/src/app/pages/charging-stations/charging-station/parameters/connector/charging-station-connector.component.ts b/src/app/pages/charging-stations/charging-station/parameters/connector/charging-station-connector.component.ts
index 0535db4aa2..7666aeba86 100644
--- a/src/app/pages/charging-stations/charging-station/parameters/connector/charging-station-connector.component.ts
+++ b/src/app/pages/charging-stations/charging-station/parameters/connector/charging-station-connector.component.ts
@@ -2,16 +2,17 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angu
import { AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup, ValidationErrors, Validators } from '@angular/forms';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { Router } from '@angular/router';
-import { CentralServerService } from 'services/central-server.service';
-import { ComponentService } from 'services/component.service';
-import { MessageService } from 'services/message.service';
-import { SpinnerService } from 'services/spinner.service';
-import { QrCodeDialogComponent } from 'shared/dialogs/qr-code/qr-code-dialog.component';
-import { CONNECTOR_TYPE_MAP } from 'shared/formatters/app-connector-type.pipe';
-import { ChargePoint, ChargingStation, Connector, CurrentType, OCPPPhase, Voltage } from 'types/ChargingStation';
-import { Image } from 'types/GlobalType';
-import { TenantComponents } from 'types/Tenant';
-import { Utils } from 'utils/Utils';
+
+import { CentralServerService } from '../../../../../services/central-server.service';
+import { ComponentService } from '../../../../../services/component.service';
+import { MessageService } from '../../../../../services/message.service';
+import { SpinnerService } from '../../../../../services/spinner.service';
+import { QrCodeDialogComponent } from '../../../../../shared/dialogs/qr-code/qr-code-dialog.component';
+import { CONNECTOR_TYPE_MAP } from '../../../../../shared/formatters/app-connector-type.pipe';
+import { ChargePoint, ChargingStation, Connector, CurrentType, OCPPPhase, Voltage } from '../../../../../types/ChargingStation';
+import { Image } from '../../../../../types/GlobalType';
+import { TenantComponents } from '../../../../../types/Tenant';
+import { Utils } from '../../../../../utils/Utils';
@Component({
selector: 'app-charging-station-connector',
@@ -28,6 +29,7 @@ export class ChargingStationConnectorComponent implements OnInit, OnChanges {
@Output() public connectorChanged = new EventEmitter
+
+
diff --git a/src/app/pages/settings-integration/billing/scan-pay/settings-scan-pay.component.ts b/src/app/pages/settings-integration/billing/scan-pay/settings-scan-pay.component.ts
new file mode 100644
index 0000000000..05d4abfab3
--- /dev/null
+++ b/src/app/pages/settings-integration/billing/scan-pay/settings-scan-pay.component.ts
@@ -0,0 +1,139 @@
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { AbstractControl, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { StatusCodes } from 'http-status-codes';
+
+import { CentralServerService } from '../../../../services/central-server.service';
+import { ComponentService } from '../../../../services/component.service';
+import { MessageService } from '../../../../services/message.service';
+import { SpinnerService } from '../../../../services/spinner.service';
+import { SettingAuthorizationActions } from '../../../../types/Authorization';
+import { RestResponse } from '../../../../types/GlobalType';
+import { ScanPaySettings, ScanPaySettingsType } from '../../../../types/Setting';
+import { TenantComponents } from '../../../../types/Tenant';
+import { Utils } from '../../../../utils/Utils';
+
+@Component({
+ selector: 'app-settings-scan-pay',
+ templateUrl: 'settings-scan-pay.component.html',
+})
+export class SettingsScanPayComponent implements OnInit, OnChanges {
+ @Input() public formGroup!: UntypedFormGroup;
+ @Input() public authorizations!: SettingAuthorizationActions;
+ @Input() public scanPaySettings!: ScanPaySettings;
+ @Input() public isBillingActive: boolean;
+ @Input() public isPricingActive: boolean;
+
+ public scanPay!: UntypedFormGroup;
+ public amount!: AbstractControl;
+ public isScanPayActive: boolean;
+
+ public constructor(
+ private componentService: ComponentService,
+ private centralServerService: CentralServerService,
+ private spinnerService: SpinnerService,
+ private router: Router,
+ private messageService: MessageService
+ ) {
+ this.isScanPayActive = this.componentService.isActive(TenantComponents.SCAN_PAY);
+ }
+
+ public ngOnInit() {
+ if (this.isScanPayActive && this.isBillingActive && this.isPricingActive) {
+ this.loadScanPayConfiguration();
+ }
+ this.scanPay = new UntypedFormGroup({
+ amount: new UntypedFormControl('',
+ Validators.compose([
+ Validators.pattern(/^[+]?[0-9]+$/),
+ Validators.required
+ ])
+ )
+ });
+ this.formGroup.addControl('scanPay', this.scanPay);
+ this.amount = this.scanPay.controls['amount'];
+ }
+
+ public ngOnChanges() {
+ this.updateFormData();
+ }
+
+ public loadScanPayConfiguration() {
+ this.spinnerService.show();
+ this.componentService.getScanPaySettings().subscribe({
+ next: (settings) => {
+ this.spinnerService.hide();
+ // Keep
+ this.scanPaySettings = settings;
+ // Init form
+ this.formGroup.markAsPristine();
+ // Set data
+ this.updateFormData();
+ },
+ error: (error) => {
+ this.spinnerService.hide();
+ switch (error.status) {
+ case StatusCodes.NOT_FOUND:
+ this.messageService.showErrorMessage('settings.scan_pay.not_found');
+ break;
+ default:
+ Utils.handleHttpError(error, this.router, this.messageService,
+ this.centralServerService, 'general.unexpected_error_backend');
+ }
+ }
+ });
+ }
+
+ public save(newSettings: any) {
+ this.scanPaySettings.type = ScanPaySettingsType.SCAN_PAY;
+ if (newSettings?.scanPay?.amount) {
+ this.scanPaySettings.content.scanPay.amount = newSettings.scanPay.amount;
+ } else {
+ this.messageService.showErrorMessage('settings.scan_pay.not_found');
+ }
+ // Save
+ this.spinnerService.show();
+ // Update scan & pay settings
+ this.componentService.saveScanPaySettings(this.scanPaySettings).subscribe({
+ next: (response) => {
+ this.spinnerService.hide();
+ if (response.status === RestResponse.SUCCESS) {
+ this.messageService.showSuccessMessage(
+ (!this.scanPaySettings.id ? 'settings.scan_pay.create_success' : 'settings.scan_pay.update_success'));
+ this.refresh();
+ } else {
+ Utils.handleError(JSON.stringify(response),
+ this.messageService, (!this.scanPaySettings.id ? 'settings.scan_pay.create_error' : 'settings.scan_pay.update_error'));
+ }
+ },
+ error: (error) => {
+ this.spinnerService.hide();
+ switch (error.status) {
+ case StatusCodes.NOT_FOUND:
+ this.messageService.showErrorMessage('settings.scan_pay.not_found');
+ break;
+ default:
+ Utils.handleHttpError(error, this.router, this.messageService, this.centralServerService,
+ (!this.scanPaySettings.id ? 'settings.scan_pay.create_error' : 'settings.scan_pay.update_error'));
+ }
+ }
+ });
+ }
+
+ public refresh() {
+ this.loadScanPayConfiguration();
+ }
+
+ private updateFormData() {
+ if (!Utils.isEmptyObject(this.scanPaySettings?.content?.scanPay) && !Utils.isEmptyObject(this.formGroup.value)) {
+ const scanPaySetting = this.scanPaySettings.content.scanPay;
+ this.amount.setValue(scanPaySetting.amount || '');
+ this.amount.markAsTouched();
+ }
+ // Read only
+ if(!this.authorizations?.canSetScanPayAmount) {
+ // Async call for letting the sub form groups to init
+ setTimeout(() => this.formGroup.disable(), 0);
+ }
+ }
+}
diff --git a/src/app/pages/settings-integration/billing/settings-billing.component.html b/src/app/pages/settings-integration/billing/settings-billing.component.html
index 656f10499a..c2d53430d0 100644
--- a/src/app/pages/settings-integration/billing/settings-billing.component.html
+++ b/src/app/pages/settings-integration/billing/settings-billing.component.html
@@ -42,6 +42,15 @@
+
+
+
+
+ {{'settings.billing.deactivated_setting_message' | translate}}
+
+
+
+
+
+ {{"settings.scan_pay.pattern_error" | translate}}
+
+
+
+ {{'settings.information' | translate}}
[authorizations]="authorizations" [formGroup]="formGroup"> + +
+
+
+ {{"scanPay.title" | translate}}
+
+
+ {{"scanPay.description" | translate}}
+
-
-
-
-
-
-
-
-
-
- ![]()
-
-
- {{chargingStationID}} / {{'chargers.connector' | translate}} {{connectorID | appConnectorId}}
-
-