#1 add success page, add flow up to success

src/app/app-routing.module.ts

@@ -4,12 +4,14 @@ import { EventListComponent } from './event-list/event-list.component';
 import { EventDisplayComponent } from './event-display/event-display.component';
 import { ReservationComponent } from './reservation/reservation.component';
 import { OverviewComponent } from './overview/overview.component';
+import { SuccessComponent } from './success/success.component';
 
 const routes: Routes = [
   { path: '', component: EventListComponent },
   { path: 'event/:eventShortName', component: EventDisplayComponent },
   { path: 'event/:eventShortName/reservation/:reservationId/book', component: ReservationComponent },
-  { path: 'event/:eventShortName/reservation/:reservationId/overview', component: OverviewComponent }
+  { path: 'event/:eventShortName/reservation/:reservationId/overview', component: OverviewComponent },
+  { path: 'event/:eventShortName/reservation/:reservationId/success', component: SuccessComponent }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -14,14 +14,16 @@ import { faInfoCircle, faGift, faTicketAlt } from '@fortawesome/free-solid-svg-i
 import { faCalendarAlt, faCalendarPlus, faCalendarCheck, faCompass, faClock } from '@fortawesome/free-regular-svg-icons';
 import { ReservationComponent } from './reservation/reservation.component';
 import { OverviewComponent } from './overview/overview.component';
+import { SuccessComponent } from './success/success.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     EventListComponent,
     EventDisplayComponent,
     ReservationComponent,
-    OverviewComponent
+    OverviewComponent,
+    SuccessComponent
   ],
   imports: [
     BrowserModule,

src/app/overview/overview.component.html

@@ -1,3 +1,15 @@
-<p>
-  overview works!
-</p>
+<div *ngIf="overview">
+
+  <form [formGroup]="overviewForm" (submit)="confirm(overview.event.shortName, overview.reservationId, overviewForm.value)">
+
+    <p><label><input formControlName="privacyPolicyAccepted" type="checkbox"> Privacy</label></p>
+    <p><label><input formControlName="termAndConditionsAccepted" type="checkbox"> Term and conditions</label></p>
+
+    <button type="button" (click)="backToBooking(overview.event.shortName, overview.reservationId)">Back</button>
+    <button type="submit">Next</button>
+
+    <pre>{{overviewForm.value | json}}</pre>
+  </form>
+
+
+</div>

src/app/overview/overview.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ReservationService } from '../shared/reservation.service';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-overview',
@@ -7,9 +10,53 @@ import { Component, OnInit } from '@angular/core';
 })
 export class OverviewComponent implements OnInit {
 
-  constructor() { }
+  overview: any;
+  overviewForm: FormGroup;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private reservationService: ReservationService,
+    private formBuilder: FormBuilder) { }
 
   ngOnInit() {
+    this.route.params.subscribe(params => {
+
+      this.reservationService.getOverview(params['eventShortName'], params['reservationId']).subscribe(resInfo => {
+        console.log(resInfo);
+
+        // TODO: move as a guard(?)
+        if (resInfo.viewState && (resInfo.viewState as string).endsWith("/book")) {
+          this.router.navigate(['event', params['eventShortName'], 'reservation', params['reservationId'], 'book'])
+          return;
+        }
+        if (resInfo.viewState && (resInfo.viewState as string).endsWith("/success")) {
+          this.router.navigate(['event', params['eventShortName'], 'reservation', params['reservationId'], 'success'])
+          return;
+        }
+        //
+
+        this.overview = resInfo;
+
+        this.overviewForm = this.formBuilder.group({
+          termAndConditionsAccepted: null,
+          privacyPolicyAccepted: null
+        });
+
+      });
+    });
+  }
+
+  backToBooking(eventShortName: string, reservationId: string) {
+    this.reservationService.backToBooking(eventShortName, reservationId).subscribe(res => {
+      this.router.navigate(['event', eventShortName, 'reservation', reservationId, 'book'])
+    });
+  }
+
+  confirm(eventShortName: string, reservationId: string, overviewFormValue) {
+    this.reservationService.confirmOverview(eventShortName, reservationId, overviewFormValue).subscribe(res => {
+      console.log(res);
+    });
   }
 
 }

src/app/reservation/reservation.component.ts

@@ -24,10 +24,13 @@ export class ReservationComponent implements OnInit {
       this.reservationService.getReservationInfo(params['eventShortName'], params['reservationId']).subscribe(resInfo => {
 
         if (resInfo.viewState && (resInfo.viewState as string).endsWith("/overview")) {
-          //redirect to overwiew!
           this.router.navigate(['event', params['eventShortName'], 'reservation', params['reservationId'], 'overview'])
           return;
         }
+        if (resInfo.viewState && (resInfo.viewState as string).endsWith("/success")) {
+          this.router.navigate(['event', params['eventShortName'], 'reservation', params['reservationId'], 'success'])
+          return;
+        }
 
         this.reservation = resInfo;
         this.contactAndTicketsForm = this.formBuilder.group({

src/app/shared/reservation.service.ts

@@ -13,7 +13,6 @@ export class ReservationService {
         return this.http.post(`/api/v2/public/event/${eventShortName}/reserve-tickets`, reservation);
     }
 
-
     public getReservationInfo(eventShortName: string, reservationId: string): Observable<any> {
         return this.http.get(`/api/v2/public/event/${eventShortName}/reservation/${reservationId}/book`);
     }
@@ -25,4 +24,16 @@ export class ReservationService {
     public validateToOverview(eventShortName: string, reservationId: string, contactsAndTicket: any): Observable<any> {
         return this.http.post(`/api/v2/public/event/${eventShortName}/reservation/${reservationId}/validate-to-overview`, contactsAndTicket);
     }
+
+    public getOverview(eventShortName: string, reservationId: string): Observable<any> {
+        return this.http.get(`/api/v2/public/event/${eventShortName}/reservation/${reservationId}/overview`);
+    }
+
+    public confirmOverview(eventShortName: string, reservationId: string, overviewForm: any): Observable<any> {
+        return this.http.post(`/api/v2/public/event/${eventShortName}/reservation/${reservationId}`, overviewForm);
+    }
+
+    public backToBooking(eventShortName: string, reservationId: string) : Observable<any> {
+        return this.http.post(`/api/v2/public/event/${eventShortName}/reservation/${reservationId}/back-to-booking`, {});
+    }
 }

src/app/success/success.component.html

@@ -0,0 +1,3 @@
+<p>
+  success works!
+</p>

src/app/success/success.component.spec.ts

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

src/app/success/success.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-success',
+  templateUrl: './success.component.html',
+  styleUrls: ['./success.component.scss']
+})
+export class SuccessComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}