Scan pay front

src/app/authentication/authentication.module.ts

@@ -3,6 +3,9 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
+import { ScanPayEmailComponent } from 'authentication/scan-pay/email/scan-pay-email.component';
+import { ComponentModule } from 'shared/component/component.module';
+import { FormattersModule } from 'shared/formatters/formatters.module';
 
 import { MaterialModule } from '../app.module';
 import { DialogsModule } from '../shared/dialogs/dialogs.module';
@@ -15,6 +18,10 @@ import { AuthenticationLoginComponent } from './login/authentication-login.compo
 import { AuthenticationMercedesDataUsageComponent } from './mercedes-data-usage/authentication-mercedes-data-usage.component';
 import { AuthenticationRegisterComponent } from './register/authentication-register.component';
 import { AuthenticationResetPasswordComponent } from './reset-password/authentication-reset-password.component';
+import { ScanPayInvoiceComponent } from './scan-pay/invoices/scan-pay-invoice.component';
+import { ScanPayComponent } from './scan-pay/scan-pay.component';
+import { ScanPayShowTransactionComponent } from './scan-pay/show-transaction/scan-pay-show-transaction.component';
+import { ScanPayStripePaymentIntentComponent } from './scan-pay/stripe/scan-pay-stripe-payment-intent.component';
 import { AuthenticationVerifyEmailComponent } from './verify-email/authentication-verify-email.component';
 
 @NgModule({
@@ -27,6 +34,8 @@ import { AuthenticationVerifyEmailComponent } from './verify-email/authenticatio
     TranslateModule,
     DialogsModule,
     CommonDirectivesModule,
+    ComponentModule,
+    FormattersModule,
   ],
   declarations: [
     AuthenticationLoginComponent,
@@ -36,7 +45,12 @@ import { AuthenticationVerifyEmailComponent } from './verify-email/authenticatio
     AuthenticationResetPasswordComponent,
     AuthenticationDefinePasswordComponent,
     AuthenticationVerifyEmailComponent,
-    AccountOnboardingComponent
+    AccountOnboardingComponent,
+    ScanPayStripePaymentIntentComponent,
+    ScanPayEmailComponent,
+    ScanPayShowTransactionComponent,
+    ScanPayComponent,
+    ScanPayInvoiceComponent,
   ],
 })
 

src/app/authentication/authentication.routing.ts

@@ -7,6 +7,10 @@ import { AuthenticationLoginComponent } from './login/authentication-login.compo
 import { AuthenticationMercedesDataUsageComponent } from './mercedes-data-usage/authentication-mercedes-data-usage.component';
 import { AuthenticationRegisterComponent } from './register/authentication-register.component';
 import { AuthenticationResetPasswordComponent } from './reset-password/authentication-reset-password.component';
+import { ScanPayEmailComponent } from './scan-pay/email/scan-pay-email.component';
+import { ScanPayInvoiceComponent } from './scan-pay/invoices/scan-pay-invoice.component';
+import { ScanPayShowTransactionComponent } from './scan-pay/show-transaction/scan-pay-show-transaction.component';
+import { ScanPayStripePaymentIntentComponent } from './scan-pay/stripe/scan-pay-stripe-payment-intent.component';
 import { AuthenticationVerifyEmailComponent } from './verify-email/authentication-verify-email.component';
 
 export const AuthenticationRoutes: Routes = [
@@ -37,7 +41,28 @@ export const AuthenticationRoutes: Routes = [
   {
     path: 'account-onboarding',
     component: AccountOnboardingComponent,
-  }, {
+  },
+  // Step #1 - flash QR code
+  {
+    path: 'scan-pay/:chargingStationID/:connectorID',
+    component: ScanPayEmailComponent,
+  },
+  // Step #2 - click on the link from the email
+  {
+    path: 'scan-pay',
+    component: ScanPayStripePaymentIntentComponent,
+  },
+  // Step #3 - show and can stop transaction
+  {
+    path: 'scan-pay/stop/:transactionID/:email/:token',
+    component: ScanPayShowTransactionComponent,
+  },
+  // Step #4 - download invoice from email once transaction is billed
+  {
+    path: 'scan-pay/invoice/:invoiceID/download',
+    component: ScanPayInvoiceComponent
+  },
+  {
     path: '**',
     redirectTo: 'login',
   },

src/app/authentication/scan-pay/email/scan-pay-email.component.html

@@ -0,0 +1,74 @@
+<div class="wrapper wrapper-full-page">
+  <div class="page-header login-page header-filter" filter-color="black">
+    <div class="container">
+      <div class="col-lg-6 ms-auto me-auto">
+        <form class="form" [formGroup]="formGroup">
+          <div class="card card-login card-hidden">
+            <div class="card-header {{headerClass}} text-center h-25">
+              <div class="social-line">
+                <div style="height: 125px; display: contents; margin: 5px;">
+                  <h4 class="mb2 card-title text-center" style="padding: 10px;">{{title | translate}}</h4>
+                </div>
+              </div>
+            </div>
+            <div class="card-body">
+              <h4 class="mb2 card-title text-center" style="padding: 10px;" *ngIf="isSendClicked">{{message | translate}}</h4>
+              <span *ngIf="!isSendClicked" class="bmd-form-group">
+                <div class="input-group">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <mat-icon>email</mat-icon>
+                      <mat-form-field class="ms-2">
+                        <input appAutofocus matInput type="text" placeholder="{{'authentication.email' | translate}}"
+                          [formControl]="email">
+                        <mat-error *ngIf="email.errors?.email">{{"authentication.invalid_email" | translate}}</mat-error>
+                        <mat-error *ngIf="email.errors?.required">{{"general.mandatory_field" | translate}}</mat-error>
+                      </mat-form-field>
+                    </span>
+                  </div>
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">
+                      <mat-icon>account_circle</mat-icon>
+                      <mat-form-field class="ms-2">
+                        <input id="last-name-field" matInput type="text" placeholder="{{'users.name' | translate}}"
+                          [formControl]="name" (input)="toUpperCase(name)">
+                          <mat-error *ngIf="name.errors?.required">{{"general.mandatory_field" | translate}}</mat-error>
+                      </mat-form-field>
+                    </span>
+                  </div>
+                  <div class="input-group-prepend input-group-no-icon">
+                    <mat-form-field class="ms-2">
+                      <input id="first-name-field" matInput type="text" placeholder="{{'users.first_name' | translate}}"
+                        [formControl]="firstName" (input)="firstLetterToUpperCase(firstName)">
+                        <mat-error *ngIf="firstName.errors?.required">{{"general.mandatory_field" | translate}}</mat-error>
+                    </mat-form-field>
+                  </div>
+                </div>
+                <div class="recaptcha-text">
+                  {{"general.captcha_text_1" | translate}}
+                  <a href="https://policies.google.com/privacy"
+                    target="_blank">{{"general.captcha_text_2" | translate}}</a>{{"general.captcha_text_3" | translate}}
+                  <a href="https://policies.google.com/terms"
+                    target="_blank">{{"general.captcha_text_4" | translate}}</a>{{"general.captcha_text_5" | translate}}.
+                </div>
+                <div class="input-group-prepend text-center mt-3 ms-2">
+                  <mat-checkbox [formControl]="acceptEula" required>
+                    <span id="eula-checkbox" class="adapt-font-size">{{'authentication.accept' | translate}} </span>
+                    <a class="auth-link" href="/auth/eula" target="_blank">
+                      <span class="adapt-font-size">{{'authentication.eula' | translate}}</span>
+                    </a>
+                  </mat-checkbox>
+                </div>
+              </span>
+            </div>
+            <div class="card-footer justify-content-center mb-4" *ngIf="!isSendClicked">
+              <button mat-raised-button color="primary" (click)="sendEmailVerificationScanAndPay(formGroup.value)"
+                [disabled]="!formGroup.valid || isSendClicked">{{"settings.scan_pay.payment_intent.create_account_send_email" | translate}}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>

src/app/authentication/scan-pay/email/scan-pay-email.component.ts

@@ -0,0 +1,168 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AbstractControl, FormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Params } from '@angular/router';
+import { StatusCodes } from 'http-status-codes';
+import { ReCaptchaV3Service } from 'ngx-captcha';
+
+import { CentralServerService } from '../../../services/central-server.service';
+import { ConfigService } from '../../../services/config.service';
+import { LocaleService } from '../../../services/locale.service';
+import { SpinnerService } from '../../../services/spinner.service';
+import { WindowService } from '../../../services/window.service';
+import { Constants } from '../../../utils/Constants';
+import { Utils } from '../../../utils/Utils';
+
+@Component({
+  selector: 'app-scan-pay-email',
+  templateUrl: 'scan-pay-email.component.html',
+})
+
+export class ScanPayEmailComponent implements OnInit, OnDestroy {
+  public email: AbstractControl;
+  public name: AbstractControl;
+  public firstName: AbstractControl;
+  public formGroup: UntypedFormGroup;
+  public isSendClicked: boolean;
+  public tenantLogo = Constants.NO_IMAGE;
+  public acceptEula: AbstractControl;
+  public headerClass = 'card-header-primary';
+  public title = 'settings.scan_pay.payment_intent.create_account_title';
+  public message: string;
+  public locale: string;
+
+  private siteKey: string;
+  private subDomain: string;
+  private params: Params;
+
+  public constructor(
+    private centralServerService: CentralServerService,
+    private spinnerService: SpinnerService,
+    private reCaptchaV3Service: ReCaptchaV3Service,
+    private windowService: WindowService,
+    private configService: ConfigService,
+    private activatedRoute: ActivatedRoute,
+    private localeService: LocaleService) {
+    this.localeService.getCurrentLocaleSubject().subscribe((locale) => {
+      this.locale = locale.currentLocaleJS;
+    });
+
+    // Get the Site Key
+    this.siteKey = this.configService.getUser().captchaSiteKey;
+    this.params = this.activatedRoute?.snapshot?.params;
+    // Init Form
+    this.formGroup = new UntypedFormGroup({
+      email: new FormControl(null,
+        Validators.compose([
+          Validators.required,
+          Validators.email,
+        ])),
+      name: new FormControl(null,
+        Validators.compose([
+          Validators.required
+        ])),
+      firstName: new FormControl(null,
+        Validators.compose([
+          Validators.required
+        ])),
+      acceptEula: new FormControl(null,
+        Validators.compose([
+          Validators.required,
+        ])),
+    });
+    // Keep the sub-domain
+    this.subDomain = this.windowService.getSubdomain();
+    // Form
+    this.email = this.formGroup.controls['email'];
+    this.name = this.formGroup.controls['name'];
+    this.firstName = this.formGroup.controls['firstName'];
+    this.acceptEula = this.formGroup.controls['acceptEula'];
+    setTimeout(() => {
+      const card = document.getElementsByClassName('card')[0];
+      // After 700 ms we add the class animated to the login/register card
+      card.classList.remove('card-hidden');
+    }, 700);
+    this.isSendClicked = false;
+  }
+
+  public ngOnInit() {
+    const body = document.getElementsByTagName('body')[0];
+    body.classList.add('lock-page');
+    body.classList.add('off-canvas-sidebar');
+    if (this.subDomain) {
+      // Retrieve tenant's logo
+      this.centralServerService.getTenantLogoBySubdomain(this.subDomain).subscribe({
+        next: (tenantLogo: string) => {
+          if (tenantLogo) {
+            this.tenantLogo = tenantLogo;
+          }
+        },
+        error: (error) => {
+          this.spinnerService.hide();
+          switch (error.status) {
+            case StatusCodes.NOT_FOUND:
+              this.tenantLogo = Constants.NO_IMAGE;
+              break;
+            default:
+              this.isSendClicked = true;
+              this.headerClass = 'card-header-danger';
+              this.title = 'settings.scan_pay.unexpected_error_title';
+              this.message = 'settings.scan_pay.unexpected_error_payment_intend';
+          }
+        }
+      });
+    } else {
+      this.tenantLogo = Constants.MASTER_TENANT_LOGO;
+    }
+  }
+
+  public ngOnDestroy() {
+    const body = document.getElementsByTagName('body')[0];
+    body.classList.remove('lock-page');
+    body.classList.remove('off-canvas-sidebar');
+  }
+
+  public toUpperCase(control: AbstractControl) {
+    control.setValue(control.value.toUpperCase());
+  }
+
+  public firstLetterToUpperCase(control: AbstractControl) {
+    if (control.value) {
+      control.setValue(Utils.firstLetterInUpperCase(control.value));
+    }
+  }
+
+  public sendEmailVerificationScanAndPay(data: any) {
+    // Show
+    this.spinnerService.show();
+    this.reCaptchaV3Service.execute(this.siteKey, 'VerifScanPay', (token) => {
+      if (token) {
+        data['captcha'] = token;
+        data['chargingStationID'] = this.params?.chargingStationID;
+        data['connectorID'] = this.params?.connectorID;
+        data['locale'] = this.locale;
+      } else {
+        this.headerClass = 'card-header-danger';
+        this.title = 'settings.scan_pay.unexpected_error_title';
+        this.message = 'settings.scan_pay.payment_intent.authentication.invalid_captcha_token';
+        return;
+      }
+      // launch email verif
+      this.centralServerService.scanPayVerifyEmail(data).subscribe({
+        next: (response) => {
+          this.isSendClicked = true;
+          this.spinnerService.hide();
+          this.headerClass = 'card-header-success';
+          this.title = 'settings.scan_pay.payment_intent.create_account_success_title';
+          this.message = 'settings.scan_pay.payment_intent.create_account_success';
+        },
+        error: (error) => {
+          this.isSendClicked = true;
+          this.spinnerService.hide();
+          this.headerClass = 'card-header-danger';
+          this.title = 'settings.scan_pay.unexpected_error_title';
+          this.message = 'settings.scan_pay.payment_intent.create_account_error';
+        }
+      });
+    });
+  }
+}

src/app/authentication/scan-pay/invoices/scan-pay-invoice.component.html

@@ -0,0 +1,22 @@
+<div class="wrapper wrapper-full-page">
+  <div class="page-header login-page header-filter" filter-color="black">
+    <div class="container">
+      <div class="col-lg-6 ms-auto me-auto">
+        <div class="card card-login">
+          <div class="card-header {{headerClass}} text-center h-25">
+            <div class="social-line">
+              <div style="height: 125px; display: contents; margin: 5px;">
+                <h4 class="mb2 card-title text-center" style="padding: 10px;">{{title | translate}}</h4>
+              </div>
+            </div>
+          </div>
+          <div class="card-body" >
+            <div class="tab-content">
+              <h4 class="mb2 card-title text-center" style="padding: 10px;">{{message | translate}}</h4>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>