feat(console): stripe (#1590)

* prepare request for sub service

* show detail, i18n

* form dialog

* country

* stripe button

* feature

* flex

* rm logs

* org creationdate, lint

* rm log

console/src/app/app.module.ts

@@ -25,6 +25,7 @@ import { AuthConfig, OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
 import { QuicklinkModule } from 'ngx-quicklink';
 import { OnboardingModule } from 'src/app/modules/onboarding/onboarding.module';
 import { RegExpPipeModule } from 'src/app/pipes/regexp-pipe/regexp-pipe.module';
+import { SubscriptionService } from 'src/app/services/subscription.service';
 
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
@@ -178,6 +179,7 @@ const authConfig: AuthConfig = {
         GrpcService,
         AuthenticationService,
         GrpcAuthService,
+        SubscriptionService,
         { provide: 'windowObject', useValue: window },
     ],
     bootstrap: [AppComponent],

console/src/app/modules/features/features.component.html

@@ -1,6 +1,39 @@
 <app-detail-layout [backRouterLink]="[ serviceType === FeatureServiceType.ADMIN ? '/iam/policies' : '/org']"
-    [title]="'ZITADEL ' +features?.tier.name + ' ' + ('FEATURES.TITLE' | translate)" [description]="'FEATURES.DESCRIPTION' | translate">
-    <p class="default" *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</p>
+    [title]="('FEATURES.TITLE' | translate)" [description]="'FEATURES.DESCRIPTION' | translate">
+
+    <h2>{{'FEATURES.TIER.TITLE' | translate}}</h2>
+    <p *ngIf="serviceType === FeatureServiceType.MGMT" class="tier-desc">{{'FEATURES.TIER.DESCRIPTION' | translate}}
+        {{'FEATURES.TIER.QUESTIONS' | translate}} <a href="mailto:support@zitadel.ch">support@zitadel.ch</a>.</p>
+
+    <div class="detail">
+        <p class="title">{{'FEATURES.TIER.NAME' | translate}}</p>
+        <p>{{features?.tier?.name}}</p>
+    </div>
+
+    <ng-container *ngIf="serviceType === FeatureServiceType.MGMT">
+        <mat-spinner class="spinner" diameter="20" *ngIf="customerLoading || stripeLoading"></mat-spinner>
+        <div class="detail" *ngIf="stripeCustomer">
+            <p class="title">{{'FEATURES.TIER.DETAILS' | translate}}
+                <a (click)="updateCustomer()">{{'ACTIONS.EDIT' | translate}}</a>
+            </p>
+            <p>{{stripeCustomer?.contact}}</p>
+            <p *ngIf="stripeCustomer.company">{{stripeCustomer?.company}}</p>
+            <p>{{stripeCustomer?.address}}</p>
+            <p *ngIf="stripeCustomer?.postal_code || stripeCustomer?.city || stripeCustomer?.country">
+                {{stripeCustomer?.postal_code}} {{stripeCustomer?.city}} {{stripeCustomer?.country}}
+                <img *ngIf="customerCountry" height="20px" width="30px"
+                    style="margin-right: 1rem; border-radius: 2px; vertical-align: middle;"
+                    src="../../../assets/flags/{{customerCountry.isoCode.toLowerCase()}}.png" />
+            </p>
+        </div>
+
+        <p class="error" *ngIf="stripeCustomer && !customerValid">{{'FEATURES.TIER.CUSTOMERINVALID' | translate}}</p>
+
+        <div class="current-tier">
+            <a [disabled]="!org.id || !customerValid" mat-raised-button [href]="stripeURL" target="_blank"
+                alt="change tier">{{'FEATURES.TIER.BTN' | translate}}</a>
+        </div>
+    </ng-container>
 
     <ng-template appHasRole [appHasRole]="['iam.features.delete']">
         <button *ngIf="serviceType === FeatureServiceType.MGMT && !isDefault"
@@ -9,12 +42,15 @@
         </button>
     </ng-template>
 
-    <div class="content" *ngIf="features">
+    <div class="divider"></div>
 
+    <p class="default" *ngIf="isDefault"> {{'POLICY.DEFAULTLABEL' | translate}}</p>
+    <div class="content" *ngIf="features">
         <div class="row">
             <span class="left-desc">{{'FEATURES.DATA.AUDITLOGRETENTION' | translate}}</span>
             <span class="fill-space"></span>
-            <span>{{features.auditLogRetention | timestampToRetention }} {{'FEATURES.RETENTIONHOURS' | translate}}</span>
+            <span>{{features.auditLogRetention | timestampToRetention }} {{'FEATURES.RETENTIONHOURS' |
+                translate}}</span>
         </div>
         <div class="row">
             <span class="left-desc">{{'FEATURES.DATA.LOGINPOLICYUSERNAMELOGIN' | translate}}</span>

console/src/app/modules/features/features.component.scss

@@ -1,8 +1,66 @@
 .default {
   color: var(--color-main);
+  font-size: 14px;
+}
+
+.tier-desc {
+  color: var(--grey);
+  font-size: 14px;
   margin-top: 0;
 }
 
+.detail {
+  margin-bottom: 1rem;
+
+  p {
+    margin: 0;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+  }
+
+  .title {
+    font-size: 14px;
+    color: var(--grey);
+    margin-bottom: .5rem;
+
+    a {
+      margin-left: .5rem;
+      cursor: pointer;
+    }
+  }
+
+  img {
+    height: 15px;
+    width: auto;
+    margin-left: .5rem;
+  }
+}
+
+.spinner {
+  margin: .5rem;
+}
+
+.error {
+  color: #f44336;
+  font-size: 14px;
+}
+
+.current-tier {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.divider {
+  height: 1px;
+  width: 100%;
+  background-color: var(--grey);
+  opacity: .5;
+  margin: .5rem 0;
+  display: block;
+}
+
 .content {
   padding-top: 1rem;
   display: flex;

console/src/app/modules/features/features.component.ts

@@ -1,4 +1,5 @@
 import { Component, Injector, OnDestroy, Type } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
@@ -13,8 +14,12 @@ import { Org } from 'src/app/proto/generated/zitadel/org_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { StorageService } from 'src/app/services/storage.service';
+import { StripeCustomer, SubscriptionService } from 'src/app/services/subscription.service';
 import { ToastService } from 'src/app/services/toast.service';
 
+import { COUNTRIES, Country } from './country';
+import { PaymentInfoDialogComponent } from './payment-info-dialog/payment-info-dialog.component';
+
 export enum FeatureServiceType {
   MGMT,
   ADMIN,
@@ -32,15 +37,23 @@ export class FeaturesComponent implements OnDestroy {
   public features!: Features.AsObject;
 
   private sub: Subscription = new Subscription();
-    private org!: Org.AsObject;
+  public org!: Org.AsObject;
 
   public FeatureServiceType: any = FeatureServiceType;
+
+  public customerLoading: boolean = false;
+  public stripeLoading: boolean = false;
+  public stripeURL: string = '';
+  public stripeCustomer!: StripeCustomer;
+
   constructor(
     private route: ActivatedRoute,
     private toast: ToastService,
     private sessionStorage: StorageService,
     private injector: Injector,
     private adminService: AdminService,
+    private subService: SubscriptionService,
+    private dialog: MatDialog,
   ) {
     const temporg = this.sessionStorage.getItem('organization') as Org.AsObject;
     if (temporg) {
@@ -55,12 +68,63 @@ export class FeaturesComponent implements OnDestroy {
     })).subscribe(_ => {
       this.fetchData();
     });
+
+    if (this.serviceType === FeatureServiceType.MGMT) {
+      this.customerLoading = true;
+      this.subService.getCustomer(this.org.id)
+        .then(payload => {
+          this.customerLoading = false;
+          this.stripeCustomer = payload;
+          if (this.customerValid) {
+            this.getLinkToStripe();
+          }
+        })
+        .catch(error => {
+          this.customerLoading = false;
+          console.error(error);
+        });
+    }
   }
 
   public ngOnDestroy(): void {
     this.sub.unsubscribe();
   }
 
+  public updateCustomer(): void {
+    const dialogRefPhone = this.dialog.open(PaymentInfoDialogComponent, {
+      data: {
+        customer: this.stripeCustomer,
+      },
+      width: '400px',
+    });
+
+    dialogRefPhone.afterClosed().subscribe(customer => {
+      if (customer) {
+        console.log(customer);
+        this.stripeCustomer = customer;
+        this.subService.updateCustomer(this.org.id, customer).then(() => {
+          this.getLinkToStripe();
+        }).catch(console.error);
+      }
+    });
+  }
+
+  public getLinkToStripe(): void {
+    if (this.serviceType === FeatureServiceType.MGMT) {
+      this.stripeLoading = true;
+      this.subService.getLink(this.org.id, window.location.href)
+        .then(payload => {
+          this.stripeLoading = false;
+          console.log(payload);
+          this.stripeURL = payload.redirect_url;
+        })
+        .catch(error => {
+          this.stripeLoading = false;
+          console.error(error);
+        });
+    }
+  }
+
   public fetchData(): void {
     this.getData().then(resp => {
       if (resp?.features) {
@@ -141,4 +205,15 @@ export class FeaturesComponent implements OnDestroy {
       return false;
     }
   }
+
+  get customerValid(): boolean {
+    return !!this.stripeCustomer?.contact &&
+      !!this.stripeCustomer?.address &&
+      !!this.stripeCustomer?.city &&
+      !!this.stripeCustomer?.postal_code;
+  }
+
+  get customerCountry(): Country | undefined {
+    return COUNTRIES.find(country => country.isoCode === this.stripeCustomer.country);
+  }
 }

console/src/app/modules/features/features.module.ts

@@ -1,8 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
@@ -14,26 +16,34 @@ import {
   TimestampToRetentionPipeModule,
 } from 'src/app/pipes/timestamp-to-retention-pipe/timestamp-to-retention-pipe.module';
 
+import { FormFieldModule } from '../form-field/form-field.module';
 import { InfoSectionModule } from '../info-section/info-section.module';
 import { FeaturesRoutingModule } from './features-routing.module';
 import { FeaturesComponent } from './features.component';
+import { PaymentInfoDialogComponent } from './payment-info-dialog/payment-info-dialog.component';
 
 @NgModule({
     declarations: [
         FeaturesComponent,
+        PaymentInfoDialogComponent,
     ],
     imports: [
         FeaturesRoutingModule,
         CommonModule,
         FormsModule,
+        ReactiveFormsModule,
         InputModule,
         MatButtonModule,
+        FormFieldModule,
+        InputModule,
         HasRoleModule,
         MatSlideToggleModule,
+        MatSelectModule,
         MatIconModule,
         HasRoleModule,
         HasRolePipeModule,
         MatTooltipModule,
+        MatProgressSpinnerModule,
         InfoSectionModule,
         TranslateModule,
         DetailLayoutModule,

console/src/app/modules/features/payment-info-dialog/payment-info-dialog.component.html

@@ -0,0 +1,60 @@
+<h1 mat-dialog-title>
+    <span class="title">{{'FEATURES.TIER.DETAILS' | translate}} {{data?.number}}</span>
+</h1>
+<p class="desc">{{'FEATURES.TIER.DETAILS_DESC' | translate}}</p>
+<mat-spinner class="spinner" *ngIf="stripeLoading" diameter="20"></mat-spinner>
+
+<div mat-dialog-content>
+    <form [formGroup]="form">
+        <cnsl-form-field class="formfield">
+            <cnsl-label>{{ 'FEATURES.TIER.CONTACT' | translate }}</cnsl-label>
+            <input cnslInput name="contact" formControlName="contact" />
+        </cnsl-form-field>
+
+        <cnsl-form-field class="formfield">
+            <cnsl-label>{{ 'FEATURES.TIER.COMPANY' | translate }}</cnsl-label>
+            <input cnslInput name="company" formControlName="company" />
+        </cnsl-form-field>
+
+        <cnsl-form-field class="formfield">
+            <cnsl-label>{{ 'FEATURES.TIER.ADDRESS' | translate }}</cnsl-label>
+            <input cnslInput name="address" formControlName="address" />
+        </cnsl-form-field>
+
+        <cnsl-form-field class="formfield">
+            <cnsl-label>{{ 'FEATURES.TIER.CITY' | translate }}</cnsl-label>
+            <input cnslInput name="city" formControlName="city" />
+        </cnsl-form-field>
+
+        <cnsl-form-field class="formfield">
+            <cnsl-label>{{ 'FEATURES.TIER.POSTAL_CODE' | translate }}</cnsl-label>
+            <input cnslInput name="postal_code" formControlName="postal_code" />
+        </cnsl-form-field>
+
+        <cnsl-form-field class="formfield">
+            <cnsl-label>{{ 'FEATURES.TIER.COUNTRY' | translate }}</cnsl-label>
+            <mat-select formControlName="country" name="country" (selectionChange)="changeCountry($event)">
+                <mat-option *ngFor="let country of COUNTRIES" [value]="country.isoCode" class="center-row">
+                    <div class="center">
+                        <div class="img-wrapper">
+                            <img height="20px" width="30px"
+                                style="margin-right: 1rem; border-radius: 2px; vertical-align: middle;"
+                                src="../../../../assets/flags/{{country.isoCode.toLowerCase()}}.png" />
+                        </div>
+                        {{country.isoCode}} <span class="lighter">|&nbsp;{{country.name}}</span>
+                    </div>
+                </mat-option>
+            </mat-select>
+        </cnsl-form-field>
+    </form>
+</div>
+<div mat-dialog-actions class="action">
+    <button cdkFocusInitial color="primary" mat-button class="ok-button" (click)="dialogRef.close()">
+        {{'ACTIONS.CLOSE' | translate}}
+    </button>
+
+    <button [disabled]="form.invalid" cdkFocusInitial color="primary" mat-raised-button class="ok-button"
+        (click)="submitAndCloseDialog()">
+        {{'ACTIONS.OK' | translate}}
+    </button>
+</div>

console/src/app/modules/features/payment-info-dialog/payment-info-dialog.component.scss

@@ -0,0 +1,47 @@
+h1 {
+  font-size: 1.5rem;
+  margin-top: 0;
+}
+
+.desc {
+  font-size: 14px;
+  color: var(--grey);
+}
+
+.formfield {
+  width: 100%;
+}
+
+.action {
+  display: flex;
+  justify-content: flex-end;
+
+  .ok-button {
+    margin-left: .5rem;
+  }
+
+  button {
+    border-radius: .5rem;
+  }
+}
+
+img {
+  height: 15px;
+  width: auto;
+}
+
+.img-wrapper {
+  width: 50px;
+  display: flex;
+}
+
+.lighter {
+  font-size: 12px;
+  color: var(--grey);
+  padding: 0 .5rem;
+}
+
+.center {
+  display: flex;
+  align-items: center;
+}

console/src/app/modules/features/payment-info-dialog/payment-info-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { PaymentInfoDialogComponent } from './payment-info-dialog.component';
+
+describe('PaymentInfoDialogComponent', () => {
+  let component: PaymentInfoDialogComponent;
+  let fixture: ComponentFixture<PaymentInfoDialogComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [PaymentInfoDialogComponent],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PaymentInfoDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

console/src/app/modules/features/payment-info-dialog/payment-info-dialog.component.ts

@@ -0,0 +1,91 @@
+import { Component, Inject } from '@angular/core';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSelectChange } from '@angular/material/select';
+import { SubscriptionService } from 'src/app/services/subscription.service';
+
+import { COUNTRIES, Country } from '../country';
+
+function compare(a: Country, b: Country): number {
+  if (a.isoCode < b.isoCode) {
+    return -1;
+  }
+  if (a.isoCode > b.isoCode) {
+    return 1;
+  }
+  return 0;
+}
+
+@Component({
+  selector: 'app-payment-info-dialog',
+  templateUrl: './payment-info-dialog.component.html',
+  styleUrls: ['./payment-info-dialog.component.scss'],
+})
+export class PaymentInfoDialogComponent {
+  public stripeLoading: boolean = false;
+  public COUNTRIES: Country[] = COUNTRIES.sort(compare);
+  public form!: FormGroup;
+
+  private orgId: string = '';
+
+  constructor(
+    private subService: SubscriptionService,
+    private fb: FormBuilder,
+    public dialogRef: MatDialogRef<PaymentInfoDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+  ) {
+    this.orgId = data.orgId;
+
+    this.form = this.fb.group({
+      contact: ['', [Validators.required]],
+      company: ['', []],
+      address: ['', [Validators.required]],
+      city: ['', [Validators.required]],
+      postal_code: ['', [Validators.required]],
+      country: ['', [Validators.required]],
+    });
+
+    if (data.customer) {
+      this.form.patchValue(data.customer);
+    }
+
+    if (!data.customer?.country) {
+      this.form.get('country')?.setValue('CH');
+    }
+
+    this.getLink();
+  }
+
+  public getLink(): void {
+    if (this.orgId) {
+      this.stripeLoading = true;
+      this.subService.getLink(this.orgId, window.location.href)
+        .then(payload => {
+          this.stripeLoading = false;
+          console.log(payload);
+          if (payload.redirect_url) {
+            window.open(payload.redirect_url, '_blank');
+          }
+        })
+        .catch(error => {
+          this.stripeLoading = false;
+          console.error(error);
+        });
+    }
+  }
+
+  public changeCountry(selection: MatSelectChange): void {
+    const country = COUNTRIES.find(c => c.isoCode === selection.value);
+    if (country && country.phoneCode !== undefined && this.phone && this.phone.value !== `+${country.phoneCode}`) {
+      this.phone.setValue(`+${country.phoneCode}`);
+    }
+  }
+
+  submitAndCloseDialog(): void {
+    this.dialogRef.close(this.form.value);
+  }
+
+  get phone(): AbstractControl | null {
+    return this.form.get('phone');
+  }
+}

console/src/app/pages/orgs/org-list/org-list.component.html

@@ -39,6 +39,16 @@
                 <td mat-cell *matCellDef="let org"> {{org.name}} </td>
             </ng-container>
 
+            <ng-container matColumnDef="creationDate">
+              <th mat-header-cell *matHeaderCellDef mat-sort-header
+                  [ngClass]="{'search-active': this.orgSearchKey == OrgListSearchKey.NAME}">
+                  {{ 'ORG.PAGES.CREATIONDATE' | translate }}
+              </th>
+              <td mat-cell *matCellDef="let org">
+                {{org.details?.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM YYYY, HH:mm'}}
+              </td>
+          </ng-container>
+
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr (click)="setAndNavigateToOrg(row)" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>

console/src/app/pages/orgs/org-list/org-list.component.ts

@@ -30,7 +30,7 @@ export class OrgListComponent implements AfterViewInit {
   @ViewChild('input') public filter!: Input;
 
   public dataSource!: MatTableDataSource<Org.AsObject>;
-    public displayedColumns: string[] = ['select', 'id', 'name'];
+  public displayedColumns: string[] = ['select', 'id', 'name', 'creationDate'];
   private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   public loading$: Observable<boolean> = this.loadingSubject.asObservable();
   public activeOrg!: Org.AsObject;

console/src/app/services/subscription.service.ts

@@ -0,0 +1,89 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { StorageService } from './storage.service';
+
+const authorizationKey = 'Authorization';
+const bearerPrefix = 'Bearer';
+const accessTokenStorageKey = 'access_token';
+
+export interface StripeCustomer {
+  contact: string;
+  company?: string;
+  address: string;
+  city: string;
+  postal_code: string;
+  country: string;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SubscriptionService {
+  constructor(private http: HttpClient, private storageService: StorageService) { }
+
+  public getLink(orgId: string, redirectURI: string): Promise<any> {
+    return this.http.get('./assets/environment.json')
+      .toPromise().then((data: any) => {
+        if (data && data.subscriptionServiceUrl) {
+          const serviceUrl = data.subscriptionServiceUrl;
+          const accessToken = this.storageService.getItem(accessTokenStorageKey);
+          return this.http.get(`${serviceUrl}/redirect`, {
+            headers: {
+              // 'Content-Type': 'application/json; charset=utf-8',
+              [authorizationKey]: `${bearerPrefix} ${accessToken}`,
+            },
+            params: {
+              'org': orgId,
+              'return_url': encodeURI(redirectURI),
+              'country': 'ch',
+            },
+          }).toPromise();
+        } else {
+          return Promise.reject('Could not load environment');
+        }
+      });
+  }
+
+  public getCustomer(orgId: string): Promise<any> {
+    return this.http.get('./assets/environment.json')
+      .toPromise().then((data: any) => {
+        if (data && data.subscriptionServiceUrl) {
+          const serviceUrl = data.subscriptionServiceUrl;
+          const accessToken = this.storageService.getItem(accessTokenStorageKey);
+          return this.http.get(`${serviceUrl}/customer`, {
+            headers: {
+              // 'Content-Type': 'application/json; charset=utf-8',
+              [authorizationKey]: `${bearerPrefix} ${accessToken}`,
+            },
+            params: {
+              'org': orgId,
+            },
+          }).toPromise();
+        } else {
+          return Promise.reject('Could not load environment');
+        }
+      });
+  }
+
+  public updateCustomer(orgId: string, body: StripeCustomer): Promise<any> {
+    return this.http.get('./assets/environment.json')
+      .toPromise().then((data: any) => {
+        if (data && data.subscriptionServiceUrl) {
+          const serviceUrl = data.subscriptionServiceUrl;
+          const accessToken = this.storageService.getItem(accessTokenStorageKey);
+          return this.http.put(`${serviceUrl}/customer`, body, {
+            headers: {
+              // 'Content-Type': 'application/json; charset=utf-8',
+              [authorizationKey]: `${bearerPrefix} ${accessToken}`,
+            },
+            params: {
+              'org': orgId,
+            },
+          }).toPromise();
+        } else {
+          return Promise.reject('Could not load environment');
+        }
+      });
+  }
+}

console/src/assets/environment.json

@@ -2,6 +2,7 @@
     "authServiceUrl": "https://api.zitadel.io",
     "mgmtServiceUrl": "https://api.zitadel.io",
     "adminServiceUrl":"https://api.zitadel.io",
+    "subscriptionServiceUrl":"https://sub.zitadel.io",
     "issuer": "https://issuer.zitadel.io",
     "clientid": "69234247558357051@zitadel"
 }