Starting enhancement for buying sessions early

src/app/app.module.ts

@@ -51,6 +51,7 @@ import { NotifierComponent } from './notifier/notifier.component';
 import { PmtserviceComponent } from './pmtservice/pmtservice.component';
 import { XeroRegComponent } from './xeroreg/xeroreg.component';
 import { DbExportComponent } from './db-export/db-export.component';
+import { SessionpayComponent } from './sessionpay/sessionpay.component';
 
 @NgModule({
     declarations: [
@@ -81,6 +82,7 @@ import { DbExportComponent } from './db-export/db-export.component';
         PmtserviceComponent,
         XeroRegComponent,
         DbExportComponent,
+        SessionpayComponent,
     ],
     imports: [
         BrowserModule,

src/app/sessionpay/sessionpay.component.html

@@ -0,0 +1,13 @@
+<mat-card [formGroup]="payForm">
+	<mat-form-field appearance="outline">
+		<mat-label>Select session:</mat-label>
+		<mat-select formControlName="session">
+			<mat-option *ngFor="let ticket of tickets" [value]="ticket.value">
+				{{ticket.viewValue}}
+			</mat-option>
+		</mat-select>
+	</mat-form-field>
+	<mat-card-actions>
+		<button mat-raised-button color="primary" [disabled]="payForm.invalid" (click)="pay()">Pay</button>
+	</mat-card-actions>
+</mat-card>

src/app/sessionpay/sessionpay.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SessionpayComponent } from './sessionpay.component';
+
+describe('SessionpayComponent', () => {
+  let component: SessionpayComponent;
+  let fixture: ComponentFixture<SessionpayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SessionpayComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SessionpayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/sessionpay/sessionpay.component.ts

@@ -0,0 +1,61 @@
+import { Inject, Component } from '@angular/core';
+import { ScanComponent } from '../scan/scan.component';
+import { Validators, UntypedFormGroup, FormBuilder } from '@angular/forms';
+import { MatDialog, MatDialogConfig, MAT_DIALOG_DATA} from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-sessionpay',
+  templateUrl: './sessionpay.component.html',
+  styleUrls: ['./sessionpay.component.css']
+})
+export class SessionpayComponent {
+
+	nodeAddress: string = '';
+	zecPrice: number = 1;
+	tickets = [
+		{
+			value: 1,
+			viewValue: '1 day: USD $1'
+		},{
+			value: 6,
+			viewValue: '1 week: USD $6'
+		},{
+			value: 22,
+			viewValue: '1 month: USD $22'
+		},{
+			value: 30,
+			viewValue: '1 month Pro: USD $30'
+		}
+	];
+	payForm: UntypedFormGroup;
+	session: string;
+	zecPrice: number;
+
+	constructor(
+		private dialog: MatDialog,
+		private fb: FormBuilder,
+		@Inject(MAT_DIALOG_DATA) public data: { addr: string, session: string, zecPrice: number }
+	) {
+		this.payForm= fb.group({
+			session: ['', Validators.required]
+		});
+		this.session = data.session;
+		this.zecPrice = data.zecPrice;
+		this.nodeAddress = data.addr;
+	}
+
+	pay(){
+		const dialogConfig = new MatDialogConfig();
+
+		dialogConfig.disableClose = true;
+		dialogConfig.autoFocus = true;
+		dialogConfig.data = {
+			totalZec: (this.payForm.get('session')!.value)/this.zecPrice,
+			addr: this.nodeAddress,
+			session: this.session,
+			pay: true
+		};
+
+		const dialogRef = this.dialog.open(ScanComponent, dialogConfig);
+	}
+}