Add the submission success route and page

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

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']);
   }
 }

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>

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/[email protected]');
+  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;
+}

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(['./']);
+  }
+}

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