From 0afe16216669795639c3ed2605680c6dc7e48004 Mon Sep 17 00:00:00 2001
From: Paul Sanders <paul.sanders@splice.com>
Date: Wed, 2 Sep 2020 19:24:16 -0400
Subject: [PATCH] Add the submission success route and page

---
 src/app/app-routing.module.ts                 |  8 ++-
 .../form-container.component.ts               |  4 +-
 .../routes/submissionSuccess.html             |  9 ++++
 .../routes/submissionSuccess.scss             | 52 +++++++++++++++++++
 .../routes/submissionSuccess.ts               | 15 ++++++
 .../sample-providers.module.ts                |  7 ++-
 6 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 src/app/modules/sample-providers/routes/submissionSuccess.html
 create mode 100644 src/app/modules/sample-providers/routes/submissionSuccess.scss
 create mode 100644 src/app/modules/sample-providers/routes/submissionSuccess.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 812b5d6..7918476 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,11 +1,15 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { FormContainerComponent } from './modules/sample-providers/routes/form-container/form-container.component';
+import { SubmissionSuccessComponent } from './modules/sample-providers/routes/submissionSuccess';
 
-const routes: Routes = [{ path: '', component: FormContainerComponent }];
+const routes: Routes = [
+  { path: '', component: FormContainerComponent },
+  { path: 'success', component: SubmissionSuccessComponent },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 export class AppRoutingModule {}
diff --git a/src/app/modules/sample-providers/routes/form-container/form-container.component.ts b/src/app/modules/sample-providers/routes/form-container/form-container.component.ts
index 1813b76..a3a3ad6 100644
--- a/src/app/modules/sample-providers/routes/form-container/form-container.component.ts
+++ b/src/app/modules/sample-providers/routes/form-container/form-container.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-form-container',
@@ -7,11 +8,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FormContainerComponent implements OnInit {
   showSuccess = false;
-  constructor() {}
+  constructor(private router: Router) {}
 
   ngOnInit(): void {}
 
   public submitForm(data): void {
     this.showSuccess = true;
+    this.router.navigate(['success']);
   }
 }
diff --git a/src/app/modules/sample-providers/routes/submissionSuccess.html b/src/app/modules/sample-providers/routes/submissionSuccess.html
new file mode 100644
index 0000000..3b1abfe
--- /dev/null
+++ b/src/app/modules/sample-providers/routes/submissionSuccess.html
@@ -0,0 +1,9 @@
+<div class="backdrop">
+  <div class="left-side">
+    <div class="header">
+      <span class="button" (click)="navigate()">< Back</span>
+      <h1>Submission Received!</h1>
+    </div>
+    <p>Thank you for your interest in Splice.<br>The wait time for getting a reply is 10 business days.</p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/sample-providers/routes/submissionSuccess.scss b/src/app/modules/sample-providers/routes/submissionSuccess.scss
new file mode 100644
index 0000000..baa998a
--- /dev/null
+++ b/src/app/modules/sample-providers/routes/submissionSuccess.scss
@@ -0,0 +1,52 @@
+:host {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  margin-left: calc(-20% - 5px);
+  margin-top: -8px;
+  background-color: black;
+}
+
+.backdrop {
+  background-image: url('https://splice.com/blog/wp-content/uploads/2020/08/30_tips_10_mins_BlogPost-500x310@2x.jpg');
+  background-repeat: no-repeat;
+  background-position: right;
+  background-size: contain;
+  color: white;
+  width: 100%;
+  height: 100%;
+}
+
+.left-side {
+  width: 40%;
+  background-color: black;
+  padding: 80px;
+  height: 100%
+}
+
+.header {
+  margin-top: 25%;
+}
+
+h1 {
+  padding-top: 7px;
+}
+
+p {
+  font-size: 2rem;
+}
+
+span.button {
+  float: left;
+  background: #03f;
+  text-align: center;
+  padding: 7px 20px;
+  margin-right: 10px;
+  border-radius: 100px;
+  font-size: 15px;
+  color: #fff;
+  font-weight: 600;
+  text-decoration: none;
+  border: none;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/app/modules/sample-providers/routes/submissionSuccess.ts b/src/app/modules/sample-providers/routes/submissionSuccess.ts
new file mode 100644
index 0000000..f4f0235
--- /dev/null
+++ b/src/app/modules/sample-providers/routes/submissionSuccess.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'submission-success',
+  templateUrl: './submissionSuccess.html',
+  styleUrls: ['./submissionSuccess.scss'],
+})
+export class SubmissionSuccessComponent {
+  constructor(public router: Router) {}
+
+  navigate() {
+    this.router.navigate(['./']);
+  }
+}
diff --git a/src/app/modules/sample-providers/sample-providers.module.ts b/src/app/modules/sample-providers/sample-providers.module.ts
index 710cc63..8c7bf9c 100644
--- a/src/app/modules/sample-providers/sample-providers.module.ts
+++ b/src/app/modules/sample-providers/sample-providers.module.ts
@@ -4,9 +4,14 @@ import { RouterModule } from '@angular/router';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FormContainerComponent } from './routes/form-container/form-container.component';
 import { SubmissionFormComponent } from './components/submission-form/submission-form.component';
+import { SubmissionSuccessComponent } from './routes/submissionSuccess';
 
 @NgModule({
-  declarations: [FormContainerComponent, SubmissionFormComponent],
+  declarations: [
+    FormContainerComponent,
+    SubmissionFormComponent,
+    SubmissionSuccessComponent,
+  ],
   imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule],
 })
 export class SampleProvidersModule {}