diff --git a/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.css b/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.css new file mode 100644 index 0000000000..917381ef01 --- /dev/null +++ b/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); +} diff --git a/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.css.d.ts b/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.css.d.ts new file mode 100644 index 0000000000..a011a392bb --- /dev/null +++ b/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; diff --git a/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.tsx b/src/modules/dashboard/components/VerificationPage/ConfirmationPage/ConfirmationPage.tsx new file mode 100644 index 0000000000..f7c4c2af0c --- /dev/null +++ b/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 {email}', + }, +}); + +const displayName = 'dashboard.VerificationPage.ConfirmationPage'; + +const ConfirmationPage = () => { + return ( +
+
+
+ +
+
+ +
+
+ +
+ ( + <> + + {chunks} + + + ), + email: 'future@korporatio.com', + }} + /> +
+
+
+ +
+
+
+ ); +}; + +ConfirmationPage.displayName = displayName; + +export default ConfirmationPage; diff --git a/src/modules/dashboard/components/VerificationPage/ConfirmationPage/index.ts b/src/modules/dashboard/components/VerificationPage/ConfirmationPage/index.ts new file mode 100644 index 0000000000..cb3b1b8938 --- /dev/null +++ b/src/modules/dashboard/components/VerificationPage/ConfirmationPage/index.ts @@ -0,0 +1 @@ +export { default } from './ConfirmationPage'; diff --git a/src/modules/pages/components/VerificationPage/VerificationPage.tsx b/src/modules/pages/components/VerificationPage/VerificationPage.tsx index 4ffb904a29..9db6cd9238 100644 --- a/src/modules/pages/components/VerificationPage/VerificationPage.tsx +++ b/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( initialFormValues, ); - const [activeStep, setActiveStep] = useState(Step.Details); + const [activeStep, setActiveStep] = useState(Step.References); + // add logic to set form as a submitted after adding sign step + const [submitted] = useState(true); const steps: StepObject[] = [ { @@ -89,6 +93,10 @@ const VerificationPage = ({ match }: Props) => { const activeStepObject = steps.find((step) => step.id === activeStep); + if (submitted) { + return ; + } + return (