Add confirmation page

src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.css

@@ -0,0 +1,68 @@
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+.infoWrapper {
+  width: 340px;
+}
+
+.header {
+  margin-bottom: 16px;
+  font-size: var(--size-medium-l);
+  font-weight: var(--weight-bold);
+  line-height: 24px;
+  color: var(--dark);
+  letter-spacing: var(--spacing-medium);
+}
+
+.description {
+  font-size: var(--size-normal);
+  font-weight: var(--weight-normal);
+  line-height: 18px;
+  color: var(--dark);
+  letter-spacing: 0.1px;
+}
+
+.buttonWrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 32px;
+}
+
+.buttonLink {
+  composes: main themePrimary sizeLarge from '~core/Button/Button.css';
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  height: 44px;
+  width: 160px;
+  letter-spacing: var(--spacing-normal);
+}
+
+.contactInfo {
+  margin-top: 28px;
+  font-size: var(--size-smallish);
+  font-weight: var(--weight-bold);
+  line-height: 18px;
+  color: var(--dark);
+  letter-spacing: var(--spacing-medium);
+}
+
+.emailTab {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 10px;
+  padding: 0 21px;
+  height: 72px;
+  width: 100%;
+  border-radius: 15px;
+  background-color: var(--colony-white);
+  font-size: var(--size-small);
+  box-shadow: 0px 2px 11px rgba(62, 118, 244, 0.14);
+}

src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.css.d.ts

@@ -0,0 +1,8 @@
+export const wrapper: string;
+export const infoWrapper: string;
+export const header: string;
+export const description: string;
+export const buttonWrapper: string;
+export const buttonLink: string;
+export const contactInfo: string;
+export const emailTab: string;

src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+import ExternalLink from '~core/ExternalLink';
+import Link from '~core/Link';
+
+import styles from './ConfirmationPage.css';
+
+const MSG = defineMessages({
+  submitted: {
+    id: 'dashboard.VerificationPage.ConfirmationPage.submitted',
+    defaultMessage: 'Verification submitted!',
+  },
+  description: {
+    id: 'dashboard.VerificationPage.ConfirmationPage.submitted',
+    defaultMessage: `Look out for an email from Korporatio. The verification process can take a few days to process.`,
+  },
+  buttonText: {
+    id: 'dashboard.VerificationPage.ConfirmationPage.buttonText',
+    defaultMessage: 'Got it, take me back',
+  },
+  questions: {
+    id: 'dashboard.VerificationPage.ConfirmationPage.about',
+    defaultMessage: 'Questions? Contact Korporatio directly',
+  },
+  email: {
+    id: 'dashboard.VerificationPage.ConfirmationPage.email',
+    defaultMessage: 'Email <a>{email}</a>',
+  },
+});
+
+const displayName = 'dashboard.VerificationPage.ConfirmationPage';
+
+const ConfirmationPage = () => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.infoWrapper}>
+        <div className={styles.header}>
+          <FormattedMessage {...MSG.submitted} />
+        </div>
+        <div className={styles.description}>
+          <FormattedMessage {...MSG.description} />
+        </div>
+        <div className={styles.contactInfo}>
+          <FormattedMessage {...MSG.questions} />
+          <div className={styles.emailTab}>
+            <FormattedMessage
+              {...MSG.email}
+              values={{
+                a: (chunks) => (
+                  <>
+                    <ExternalLink href="mailto:[email protected]">
+                      {chunks}
+                    </ExternalLink>
+                  </>
+                ),
+                email: '[email protected]',
+              }}
+            />
+          </div>
+        </div>
+        <div className={styles.buttonWrapper}>
+          <Link to="/" className={styles.buttonLink} text={MSG.buttonText} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ConfirmationPage.displayName = displayName;
+
+export default ConfirmationPage;

src/modules/dashboard/components/VerificationPage/ConfirmationPage/index.ts

@@ -0,0 +1 @@
+export { default } from './ConfirmationPage';

src/modules/pages/components/VerificationPage/VerificationPage.tsx

@@ -1,17 +1,19 @@
 import React, { useState } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import { RouteChildrenProps } from 'react-router';
+
 import ContactSection from '~dashboard/VerificationPage/ContactSection/ContactSection';
 import Tabs from '~dashboard/VerificationPage/Tabs';
-
-import { ContextValuesType, Step, StepObject } from './types';
-import styles from './VerificationPage.css';
 import AboutVerification from '~dashboard/VerificationPage/AboutVerification';
 import Details from '~dashboard/VerificationPage/Details';
 import Location from '~dashboard/VerificationPage/Location';
 import References from '~dashboard/VerificationPage/References';
+import ConfirmationPage from '~dashboard/VerificationPage/ConfirmationPage';
+
+import { ContextValuesType, Step, StepObject } from './types';
 import { VerificationDataContextProvider } from './VerificationDataContext';
 import { initialFormValues } from './constants';
+import styles from './VerificationPage.css';
 
 const displayName = 'pages.VerificationPage';
 
@@ -58,7 +60,9 @@ const VerificationPage = ({ match }: Props) => {
   const [formValues, setFormValues] = useState<ContextValuesType>(
     initialFormValues,
   );
-  const [activeStep, setActiveStep] = useState<Step>(Step.Details);
+  const [activeStep, setActiveStep] = useState<Step>(Step.References);
+  // add logic to set form as a submitted after adding sign step
+  const [submitted] = useState<boolean>(true);
 
   const steps: StepObject[] = [
     {
@@ -89,6 +93,10 @@ const VerificationPage = ({ match }: Props) => {
 
   const activeStepObject = steps.find((step) => step.id === activeStep);
 
+  if (submitted) {
+    return <ConfirmationPage />;
+  }
+
   return (
     <VerificationDataContextProvider value={{ formValues, setFormValues }}>
       <div className={styles.wrapper}>