WIP: Stripe payment elements front

src/app/pages/users/user/payment-methods/payment-method/stripe/stripe-payment-method.component.ts

@@ -1,19 +1,19 @@
-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { AbstractControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { SetupIntent, StripeCardCvcElement, StripeCardExpiryElement, StripeCardNumberElement, StripeElements, StripeError } from '@stripe/stripe-js';
-import { ComponentService } from 'services/component.service';
-import { StripeService } from 'services/stripe.service';
-import { BillingOperationResult } from 'types/DataResult';
-import { TenantComponents } from 'types/Tenant';
 
 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 { StripeService } from '../../../../../../services/stripe.service';
+import { PaymentMethodDialogComponent } from '../../../../../../shared/dialogs/payment-methods/payment-method.dialog.component';
+import { BillingOperationResult } from '../../../../../../types/DataResult';
+import { TenantComponents } from '../../../../../../types/Tenant';
 import { Utils } from '../../../../../../utils/Utils';
-import { PaymentMethodDialogComponent } from '../payment-method.dialog.component';
 
 @Component({
   selector: 'app-stripe-payment-method',
@@ -24,7 +24,6 @@ export class StripePaymentMethodComponent implements OnInit {
   @Input() public inDialog!: boolean;
   @Input() public dialogRef!: MatDialogRef<PaymentMethodDialogComponent>;
   @Input() public currentUserID!: string;
-  @ViewChild('cardInfo', { static: true }) public cardInfo: ElementRef;
   public formGroup!: UntypedFormGroup;
   public isBillingComponentActive: boolean;
   public userID: string;

src/app/pages/users/user/payment-methods/payment-methods.component.ts

@@ -1,7 +1,6 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
-import { User } from 'types/User';
+import { Component, Input, OnChanges } from '@angular/core';
 
-import { PaymentMethodsTableDataSource } from './payment-methods-table-data-source';
+import { PaymentMethodsTableDataSource } from '../../../../shared/dialogs/payment-methods/payment-methods-table-data-source';
 
 @Component({
   selector: 'app-payment-methods',

src/app/pages/users/users.module.ts

@@ -7,8 +7,10 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MaterialModule } from '../../app.module';
 import { AddressModule } from '../../shared/address/address.module';
 import { DialogsModule } from '../../shared/dialogs/dialogs.module';
+import { PaymentMethodDialogComponent } from '../../shared/dialogs/payment-methods/payment-method.dialog.component';
 import { CommonDirectivesModule } from '../../shared/directives/directives.module';
 import { FormattersModule } from '../../shared/formatters/formatters.module';
+import { StripeElementComponent } from '../../shared/stripe-element/stripe-element.component';
 import { TableModule } from '../../shared/table/table.module';
 import { ConcurUserConnectionComponent } from './connections/concur/concur-user-connection.component';
 import { MercedesUserConnectionComponent } from './connections/mercedes/mercedes-user-connection.component';
@@ -29,7 +31,6 @@ import { UserMainComponent } from './user/main/user-main.component';
 import { UserMiscsComponent } from './user/miscs/user-miscs.component';
 import { UserNotificationsComponent } from './user/notifications/user-notifications.component';
 import { AppPaymentMethodStatusPipe, PaymentMethodStatusComponent } from './user/payment-methods/payment-method/payment-method-status.component';
-import { PaymentMethodDialogComponent } from './user/payment-methods/payment-method/payment-method.dialog.component';
 import { StripePaymentMethodComponent } from './user/payment-methods/payment-method/stripe/stripe-payment-method.component';
 import { PaymentMethodsComponent } from './user/payment-methods/payment-methods.component';
 import { UserSecurityComponent } from './user/security/user-security.component';
@@ -77,7 +78,8 @@ import { UserRoutes } from './users.routing';
     PaymentMethodsComponent,
     PaymentMethodDialogComponent,
     AppPaymentMethodStatusPipe,
-    PaymentMethodStatusComponent
+    PaymentMethodStatusComponent,
+    StripeElementComponent
   ],
   exports: [
     AppUserRolePipe,

src/app/shared/dialogs/payment-methods/payment-method.dialog.component.ts

@@ -0,0 +1,32 @@
+import { AfterViewInit, Component, Inject, ViewChild } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+import { DialogParams } from '../../../types/Authorization';
+import { PaymentDialogData } from '../../../types/Billing';
+import { BillingSettings } from '../../../types/Setting';
+import { Constants } from '../../../utils/Constants';
+import { Utils } from '../../../utils/Utils';
+import { StripeElementComponent } from '../../stripe-element/stripe-element.component';
+
+@Component({
+  template: Constants.STRIPE_ELEMENTS ?
+    '<app-stripe-element *ngIf="billingSettings?.stripe" #appRef [billingSettings]="billingSettings" [currentUserID]="userID" [inDialog]="true" [dialogRef]="dialogRef"></app-stripe-element>':
+    '<app-stripe-payment-method *ngIf="billingSettings?.stripe" #appRef [billingSettings]="billingSettings" [currentUserID]="userID" [inDialog]="true" [dialogRef]="dialogRef"></app-stripe-payment-method>',
+})
+export class PaymentMethodDialogComponent implements AfterViewInit {
+  @ViewChild('appRef') public appRef!: StripeElementComponent;
+  public userID!: string;
+  public billingSettings!: BillingSettings;
+
+  public constructor(
+    public dialogRef: MatDialogRef<PaymentMethodDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) data: DialogParams<PaymentDialogData>) {
+    this.userID = data.dialogData.userId;
+    this.billingSettings = data.dialogData.setting;
+  }
+
+  public ngAfterViewInit() {
+    Utils.registerSaveCloseKeyEvents(this.dialogRef, this.appRef.formGroup,
+      this.appRef.linkCardToAccount.bind(this.appRef), this.appRef.close.bind(this.appRef));
+  }
+}

src/app/pages/users/user/payment-methods/payment-methods-table-data-source.ts → src/app/shared/dialogs/payment-methods/payment-methods-table-data-source.ts

@@ -3,27 +3,27 @@ import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
-import { BillingPaymentMethodsAuthorizationActions } from 'types/Authorization';
-import { HTTPError } from 'types/HTTPError';
 
-import { CentralServerService } from '../../../../services/central-server.service';
-import { ComponentService } from '../../../../services/component.service';
-import { DialogService } from '../../../../services/dialog.service';
-import { MessageService } from '../../../../services/message.service';
-import { SpinnerService } from '../../../../services/spinner.service';
-import { WindowService } from '../../../../services/window.service';
-import { AppDatePipe } from '../../../../shared/formatters/app-date.pipe';
-import { TableRefreshAction } from '../../../../shared/table/actions/table-refresh-action';
-import { TableCreatePaymentMethodAction, TableCreatePaymentMethodActionDef } from '../../../../shared/table/actions/users/table-create-payment-method-action';
-import { TableDeletePaymentMethodAction, TableDeletePaymentMethodActionDef } from '../../../../shared/table/actions/users/table-delete-payment-method';
-import { TableDataSource } from '../../../../shared/table/table-data-source';
-import { BillingButtonAction, BillingPaymentMethod } from '../../../../types/Billing';
-import { BillingPaymentMethodDataResult } from '../../../../types/DataResult';
-import { BillingSettings } from '../../../../types/Setting';
-import { TableActionDef, TableColumnDef, TableDef, TableFilterDef } from '../../../../types/Table';
-import { Utils } from '../../../../utils/Utils';
-import { PaymentMethodStatusComponent } from './payment-method/payment-method-status.component';
-import { PaymentMethodDialogComponent } from './payment-method/payment-method.dialog.component';
+import { PaymentMethodStatusComponent } from '../../../pages/users/user/payment-methods/payment-method/payment-method-status.component';
+import { CentralServerService } from '../../../services/central-server.service';
+import { ComponentService } from '../../../services/component.service';
+import { DialogService } from '../../../services/dialog.service';
+import { MessageService } from '../../../services/message.service';
+import { SpinnerService } from '../../../services/spinner.service';
+import { WindowService } from '../../../services/window.service';
+import { BillingPaymentMethodsAuthorizationActions } from '../../../types/Authorization';
+import { BillingButtonAction, BillingPaymentMethod } from '../../../types/Billing';
+import { BillingPaymentMethodDataResult } from '../../../types/DataResult';
+import { HTTPError } from '../../../types/HTTPError';
+import { BillingSettings } from '../../../types/Setting';
+import { TableActionDef, TableColumnDef, TableDef, TableFilterDef } from '../../../types/Table';
+import { Utils } from '../../../utils/Utils';
+import { PaymentMethodDialogComponent } from '../../dialogs/payment-methods/payment-method.dialog.component';
+import { AppDatePipe } from '../../formatters/app-date.pipe';
+import { TableRefreshAction } from '../../table/actions/table-refresh-action';
+import { TableCreatePaymentMethodAction, TableCreatePaymentMethodActionDef } from '../../table/actions/users/table-create-payment-method-action';
+import { TableDeletePaymentMethodAction, TableDeletePaymentMethodActionDef } from '../../table/actions/users/table-delete-payment-method';
+import { TableDataSource } from '../../table/table-data-source';
 
 @Injectable()
 export class PaymentMethodsTableDataSource extends TableDataSource<BillingPaymentMethod> {

src/app/shared/stripe-element/stripe-element.component.html

@@ -0,0 +1,48 @@
+<div class="main-content stripe-element-dialog-size">
+  <div class="card card-profile card-testimonial">
+    <mat-tab-group animationDuration="0ms" disableRipple="true" class="mat-tab-info" [class]="dialogRef ? 'mat-tabs-with-actions' : 'mat-tabs-with-close-action'">
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <mat-icon>payment</mat-icon>
+          <span>{{'settings.billing.payment_methods_create_title' | translate}}</span>
+        </ng-template>
+        <div class="card-body mat-tab-dialog-body-content">
+          <form class="form" [formGroup]="formGroup">
+            <div id="payment-element">
+              <!-- Mount the Payment Element here -->
+            </div>
+            <div class="row">
+              <div class="col-md-12">
+                <div class="form-group">
+                  <div class="stripe-user-consent">
+                    {{'settings.billing.payment_methods_conditions' | translate}}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-md-12">
+                <div class="form-group">
+                  <div>
+                    <mat-checkbox [formControl]="acceptConditions" (change)="handleAcceptConditions()">
+                      {{'settings.billing.payment_methods_check' | translate}}
+                    </mat-checkbox>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+    <div [class]="dialogRef ? 'tabs-actions' : 'tabs-actions-embedded'">
+      <button mat-icon-button (click)="linkCardToAccount()" title="{{'general.save' | translate}}"
+          [disabled]="!hasAcceptedConditions || isSaveClicked">
+        <mat-icon>save</mat-icon>
+      </button>
+      <button mat-icon-button *ngIf="inDialog" (click)="close()" [disabled]="isSaveClicked" title="{{'general.close' | translate}}">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
+  </div>
+</div>

src/app/shared/stripe-element/stripe-element.component.scss

@@ -0,0 +1,17 @@
+@use '@angular/material' as mat;
+@import '../../../assets/scss/core/variables/theme';
+@import '../../../assets/scss/core/variables/brand';
+
+.stripe-element-dialog-size {
+  max-width: 500px;
+  max-height: 700px;
+}
+
+.stripe-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;
+}
+