zgo/src/app/business/business.component.html

<app-header></app-header>
<div align="center">
	<mat-card class="centercard">
		<h3>Business sign-up</h3>
		<mat-vertical-stepper #stepper linear>
			<mat-step label="Provide business info" editable="false">
				<p>We do not have a business associated with this Zcash address, please enter your information below:</p>
				<mat-card [formGroup]="bizForm">
					<mat-form-field appearance="outline" [style.width.px]=300>
						<mat-label>Business Name</mat-label>
						<input matInput placeholder="Business Name" formControlName="name">
					</mat-form-field>
					<br>
					<mat-form-field appearance="outline">
						<mat-label>Contact First Name</mat-label>
						<input matInput placeholder="First Name" formControlName="first">
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>Contact Last Name</mat-label>
						<input matInput placeholder="Last Name" formControlName="last">
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>Address</mat-label>
						<input matInput placeholder="Address" formControlName="street">
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>City</mat-label>
						<input matInput placeholder="City" formControlName="city">
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>State/Province</mat-label>
						<input matInput placeholder="State or Province" formControlName="state">
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>Postal Code</mat-label>
						<input matInput placeholder="Postal Code" formControlName="postal">
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>Country</mat-label>
						<input matInput placeholder="Country" formControlName="country" [matAutocomplete]="auto">
						<mat-autocomplete #auto="matAutocomplete">
							<mat-option *ngFor="let ctry of countries | searchOptions:bizForm.get('country')!.value" [value]="ctry.name">
								{{ctry.name}}
							</mat-option>
						</mat-autocomplete>
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>E-mail</mat-label>
						<input matInput type="email" placeholder="E-mail" formControlName="email">
					</mat-form-field>
					<mat-form-field appearance="outline">
						<mat-label>Website</mat-label>
						<input matInput placeholder="Website" formControlName="website">
					</mat-form-field>
					<mat-slide-toggle (change)="onChange($event)">
						I accept the <a class="link" (click)="showTerms()">Terms of Use</a>
					</mat-slide-toggle>
					<mat-card-actions>
						<button mat-raised-button color="primary" [disabled]="bizForm.invalid || !termsChecked" (click)="save()">Save</button>
					</mat-card-actions>
				</mat-card>

			</mat-step>
			<mat-step label="Select your session" editable="false">
				<p>Please select the length of session that you need:</p>
				<mat-card [formGroup]="payForm">
					<mat-form-field appearance="outline">
						<mat-label>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>
			</mat-step>
			<mat-step label="ZGo confirms your payment" editable="false">
				<p>{{barMessage}}</p>
				<mat-progress-bar
					[mode]="barMode"
					[value]="barValue">
				</mat-progress-bar>
			</mat-step>

		</mat-vertical-stepper>
	</mat-card>
</div>