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,11 +1,12 @@
 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';
 import {
-    GetOrgFeaturesResponse,
-    SetDefaultFeaturesRequest,
-    SetOrgFeaturesRequest,
+  GetOrgFeaturesResponse,
+  SetDefaultFeaturesRequest,
+  SetOrgFeaturesRequest,
 } from 'src/app/proto/generated/zitadel/admin_pb';
 import { Features } from 'src/app/proto/generated/zitadel/features_pb';
 import { GetFeaturesResponse } from 'src/app/proto/generated/zitadel/management_pb';
@@ -13,132 +14,206 @@ 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,
+  MGMT,
+  ADMIN,
 }
 
 @Component({
-    selector: 'app-features',
-    templateUrl: './features.component.html',
-    styleUrls: ['./features.component.scss'],
+  selector: 'app-features',
+  templateUrl: './features.component.html',
+  styleUrls: ['./features.component.scss'],
 })
 export class FeaturesComponent implements OnDestroy {
-    private managementService!: ManagementService;
-    public serviceType!: FeatureServiceType;
+  private managementService!: ManagementService;
+  public serviceType!: FeatureServiceType;
 
-    public features!: Features.AsObject;
+  public features!: Features.AsObject;
 
-    private sub: Subscription = new Subscription();
-    private org!: Org.AsObject;
+  private sub: Subscription = new Subscription();
+  public org!: Org.AsObject;
 
-    public FeatureServiceType: any = FeatureServiceType;
-    constructor(
-        private route: ActivatedRoute,
-        private toast: ToastService,
-        private sessionStorage: StorageService,
-        private injector: Injector,
-        private adminService: AdminService,
-    ) {
-        const temporg = this.sessionStorage.getItem('organization') as Org.AsObject;
-        if (temporg) {
-            this.org = temporg;
-        }
-        this.sub = this.route.data.pipe(switchMap(data => {
-            this.serviceType = data.serviceType;
-            if (this.serviceType === FeatureServiceType.MGMT) {
-                this.managementService = this.injector.get(ManagementService as Type<ManagementService>);
-            }
-            return this.route.params;
-        })).subscribe(_ => {
-            this.fetchData();
+  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) {
+      this.org = temporg;
+    }
+    this.sub = this.route.data.pipe(switchMap(data => {
+      this.serviceType = data.serviceType;
+      if (this.serviceType === FeatureServiceType.MGMT) {
+        this.managementService = this.injector.get(ManagementService as Type<ManagementService>);
+      }
+      return this.route.params;
+    })).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 ngOnDestroy(): void {
+    this.sub.unsubscribe();
+  }
 
-    public fetchData(): void {
-        this.getData().then(resp => {
-            if (resp?.features) {
-                this.features = resp.features;
-            }
+  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);
         });
     }
+  }
 
-    private async getData(): Promise<GetFeaturesResponse.AsObject | GetOrgFeaturesResponse.AsObject | undefined> {
-        switch (this.serviceType) {
-            case FeatureServiceType.MGMT:
-                return this.managementService.getFeatures();
-            case FeatureServiceType.ADMIN:
-                if (this.org?.id) {
-                    return this.adminService.getDefaultFeatures();
-                }
-                break;
+  public fetchData(): void {
+    this.getData().then(resp => {
+      if (resp?.features) {
+        this.features = resp.features;
+      }
+    });
+  }
+
+  private async getData(): Promise<GetFeaturesResponse.AsObject | GetOrgFeaturesResponse.AsObject | undefined> {
+    switch (this.serviceType) {
+      case FeatureServiceType.MGMT:
+        return this.managementService.getFeatures();
+      case FeatureServiceType.ADMIN:
+        if (this.org?.id) {
+          return this.adminService.getDefaultFeatures();
         }
+        break;
     }
+  }
 
-    public savePolicy(): void {
-        switch (this.serviceType) {
-            case FeatureServiceType.MGMT:
-                const req = new SetOrgFeaturesRequest();
-                req.setOrgId(this.org.id);
+  public savePolicy(): void {
+    switch (this.serviceType) {
+      case FeatureServiceType.MGMT:
+        const req = new SetOrgFeaturesRequest();
+        req.setOrgId(this.org.id);
 
-                req.setLoginPolicyUsernameLogin(this.features.loginPolicyUsernameLogin);
-                req.setLoginPolicyRegistration(this.features.loginPolicyRegistration);
-                req.setLoginPolicyIdp(this.features.loginPolicyIdp);
-                req.setLoginPolicyFactors(this.features.loginPolicyFactors);
-                req.setLoginPolicyPasswordless(this.features.loginPolicyPasswordless);
-                req.setPasswordComplexityPolicy(this.features.passwordComplexityPolicy);
-                req.setLabelPolicy(this.features.labelPolicy);
+        req.setLoginPolicyUsernameLogin(this.features.loginPolicyUsernameLogin);
+        req.setLoginPolicyRegistration(this.features.loginPolicyRegistration);
+        req.setLoginPolicyIdp(this.features.loginPolicyIdp);
+        req.setLoginPolicyFactors(this.features.loginPolicyFactors);
+        req.setLoginPolicyPasswordless(this.features.loginPolicyPasswordless);
+        req.setPasswordComplexityPolicy(this.features.passwordComplexityPolicy);
+        req.setLabelPolicy(this.features.labelPolicy);
 
-                this.adminService.setOrgFeatures(req).then(() => {
-                    this.toast.showInfo('POLICY.TOAST.SET', true);
-                }).catch(error => {
-                    this.toast.showError(error);
-                });
-                break;
-            case FeatureServiceType.ADMIN:
-                // update Default org iam policy?
-                const dreq = new SetDefaultFeaturesRequest();
-                dreq.setLoginPolicyUsernameLogin(this.features.loginPolicyUsernameLogin);
-                dreq.setLoginPolicyRegistration(this.features.loginPolicyRegistration);
-                dreq.setLoginPolicyIdp(this.features.loginPolicyIdp);
-                dreq.setLoginPolicyFactors(this.features.loginPolicyFactors);
-                dreq.setLoginPolicyPasswordless(this.features.loginPolicyPasswordless);
-                dreq.setPasswordComplexityPolicy(this.features.passwordComplexityPolicy);
-                dreq.setLabelPolicy(this.features.labelPolicy);
+        this.adminService.setOrgFeatures(req).then(() => {
+          this.toast.showInfo('POLICY.TOAST.SET', true);
+        }).catch(error => {
+          this.toast.showError(error);
+        });
+        break;
+      case FeatureServiceType.ADMIN:
+        // update Default org iam policy?
+        const dreq = new SetDefaultFeaturesRequest();
+        dreq.setLoginPolicyUsernameLogin(this.features.loginPolicyUsernameLogin);
+        dreq.setLoginPolicyRegistration(this.features.loginPolicyRegistration);
+        dreq.setLoginPolicyIdp(this.features.loginPolicyIdp);
+        dreq.setLoginPolicyFactors(this.features.loginPolicyFactors);
+        dreq.setLoginPolicyPasswordless(this.features.loginPolicyPasswordless);
+        dreq.setPasswordComplexityPolicy(this.features.passwordComplexityPolicy);
+        dreq.setLabelPolicy(this.features.labelPolicy);
 
-                this.adminService.setDefaultFeatures(dreq).then(() => {
-                    this.toast.showInfo('POLICY.TOAST.SET', true);
-                }).catch(error => {
-                    this.toast.showError(error);
-                });
-                break;
-        }
+        this.adminService.setDefaultFeatures(dreq).then(() => {
+          this.toast.showInfo('POLICY.TOAST.SET', true);
+        }).catch(error => {
+          this.toast.showError(error);
+        });
+        break;
     }
+  }
 
-    public resetFeatures(): void {
-        if (this.serviceType === FeatureServiceType.MGMT) {
-            this.adminService.resetOrgFeatures(this.org.id).then(() => {
-                this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true);
-                setTimeout(() => {
-                    this.fetchData();
-                }, 1000);
-            }).catch(error => {
-                this.toast.showError(error);
-            });
-        }
+  public resetFeatures(): void {
+    if (this.serviceType === FeatureServiceType.MGMT) {
+      this.adminService.resetOrgFeatures(this.org.id).then(() => {
+        this.toast.showInfo('POLICY.TOAST.RESETSUCCESS', true);
+        setTimeout(() => {
+          this.fetchData();
+        }, 1000);
+      }).catch(error => {
+        this.toast.showError(error);
+      });
     }
+  }
 
-    public get isDefault(): boolean {
-        if (this.features && this.serviceType === FeatureServiceType.MGMT) {
-            return this.features.isDefault;
-        } else {
-            return false;
-        }
+  public get isDefault(): boolean {
+    if (this.features && this.serviceType === FeatureServiceType.MGMT) {
+      return this.features.isDefault;
+    } else {
+      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';
@@ -11,29 +13,37 @@ import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.
 import { InputModule } from 'src/app/modules/input/input.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 import {
-    TimestampToRetentionPipeModule,
+  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

@@ -11,102 +11,102 @@ import { Org, OrgNameQuery, OrgQuery } from 'src/app/proto/generated/zitadel/org
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 
 enum OrgListSearchKey {
-    NAME = 'NAME',
+  NAME = 'NAME',
 }
 
 @Component({
-    selector: 'app-org-list',
-    templateUrl: './org-list.component.html',
-    styleUrls: ['./org-list.component.scss'],
-    animations: [
-        enterAnimations,
-    ],
+  selector: 'app-org-list',
+  templateUrl: './org-list.component.html',
+  styleUrls: ['./org-list.component.scss'],
+  animations: [
+    enterAnimations,
+  ],
 })
 export class OrgListComponent implements AfterViewInit {
-    public orgSearchKey: OrgListSearchKey | undefined = undefined;
+  public orgSearchKey: OrgListSearchKey | undefined = undefined;
 
-    @ViewChild(MatPaginator) public paginator!: MatPaginator;
-    @ViewChild(MatSort) sort!: MatSort;
-    @ViewChild('input') public filter!: Input;
+  @ViewChild(MatPaginator) public paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild('input') public filter!: Input;
 
-    public dataSource!: MatTableDataSource<Org.AsObject>;
-    public displayedColumns: string[] = ['select', 'id', 'name'];
-    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
-    public activeOrg!: Org.AsObject;
-    public OrgListSearchKey: any = OrgListSearchKey;
+  public dataSource!: MatTableDataSource<Org.AsObject>;
+  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;
+  public OrgListSearchKey: any = OrgListSearchKey;
 
-    constructor(
-        private authService: GrpcAuthService,
-        private router: Router,
-    ) {
-        this.loadOrgs(10, 0);
+  constructor(
+    private authService: GrpcAuthService,
+    private router: Router,
+  ) {
+    this.loadOrgs(10, 0);
 
-        this.authService.getActiveOrg().then(org => this.activeOrg = org);
+    this.authService.getActiveOrg().then(org => this.activeOrg = org);
+  }
+
+  public ngAfterViewInit(): void {
+    this.loadOrgs(10, 0);
+  }
+
+  public loadOrgs(limit: number, offset: number, filter?: string): void {
+    this.loadingSubject.next(true);
+    let query;
+    if (filter) {
+      query = new OrgQuery();
+      const orgNameQuery = new OrgNameQuery();
+      orgNameQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
+      orgNameQuery.setName(filter);
+      query.setNameQuery(orgNameQuery);
     }
 
-    public ngAfterViewInit(): void {
-        this.loadOrgs(10, 0);
+    from(this.authService.listMyProjectOrgs(limit, offset, query ? [query] : undefined)).pipe(
+      map(resp => {
+        return resp.resultList;
+      }),
+      catchError(() => of([])),
+      finalize(() => this.loadingSubject.next(false)),
+    ).subscribe(views => {
+      this.dataSource = new MatTableDataSource(views);
+      this.dataSource.paginator = this.paginator;
+      this.dataSource.sort = this.sort;
+    });
+  }
+
+  public selectOrg(item: Org.AsObject, event?: any): void {
+    this.authService.setActiveOrg(item);
+  }
+
+  public refresh(): void {
+    this.loadOrgs(this.paginator.length, this.paginator.pageSize * this.paginator.pageIndex);
+  }
+
+  public setFilter(key: OrgListSearchKey): void {
+    setTimeout(() => {
+      if (this.filter) {
+        (this.filter as any).nativeElement.focus();
+      }
+    }, 100);
+
+    if (this.orgSearchKey !== key) {
+      this.orgSearchKey = key;
+    } else {
+      this.orgSearchKey = undefined;
+      this.refresh();
     }
+  }
 
-    public loadOrgs(limit: number, offset: number, filter?: string): void {
-        this.loadingSubject.next(true);
-        let query;
-        if (filter) {
-            query = new OrgQuery();
-            const orgNameQuery = new OrgNameQuery();
-            orgNameQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
-            orgNameQuery.setName(filter);
-            query.setNameQuery(orgNameQuery);
-        }
+  public applyFilter(event: Event): void {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.loadOrgs(
+      this.paginator.pageSize,
+      this.paginator.pageIndex * this.paginator.pageSize,
+      filterValue.trim().toLowerCase(),
+    );
+  }
 
-        from(this.authService.listMyProjectOrgs(limit, offset, query ? [query] : undefined)).pipe(
-            map(resp => {
-                return resp.resultList;
-            }),
-            catchError(() => of([])),
-            finalize(() => this.loadingSubject.next(false)),
-        ).subscribe(views => {
-            this.dataSource = new MatTableDataSource(views);
-            this.dataSource.paginator = this.paginator;
-            this.dataSource.sort = this.sort;
-        });
-    }
-
-    public selectOrg(item: Org.AsObject, event?: any): void {
-        this.authService.setActiveOrg(item);
-    }
-
-    public refresh(): void {
-        this.loadOrgs(this.paginator.length, this.paginator.pageSize * this.paginator.pageIndex);
-    }
-
-    public setFilter(key: OrgListSearchKey): void {
-        setTimeout(() => {
-            if (this.filter) {
-                (this.filter as any).nativeElement.focus();
-            }
-        }, 100);
-
-        if (this.orgSearchKey !== key) {
-            this.orgSearchKey = key;
-        } else {
-            this.orgSearchKey = undefined;
-            this.refresh();
-        }
-    }
-
-    public applyFilter(event: Event): void {
-        const filterValue = (event.target as HTMLInputElement).value;
-        this.loadOrgs(
-            this.paginator.pageSize,
-            this.paginator.pageIndex * this.paginator.pageSize,
-            filterValue.trim().toLowerCase(),
-        );
-    }
-
-    public setAndNavigateToOrg(org: Org.AsObject): void {
-        this.authService.setActiveOrg(org);
-        this.router.navigate(['/org']);
-    }
+  public setAndNavigateToOrg(org: Org.AsObject): void {
+    this.authService.setActiveOrg(org);
+    this.router.navigate(['/org']);
+  }
 }

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"
 }