diff --git a/public/images/greenTick.svg b/public/images/greenTick.svg new file mode 100644 index 00000000..a5d6f4f9 --- /dev/null +++ b/public/images/greenTick.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/config/lexics/public.tsx b/src/config/lexics/public.tsx index f0b3a41e..303ad817 100644 --- a/src/config/lexics/public.tsx +++ b/src/config/lexics/public.tsx @@ -25,6 +25,7 @@ export const publicLexics = { login: 1367, next: 12916, register: 1305, + registration_successful: 12945, select_language: 1005, step_title_card: 12917, step_title_login: 500, diff --git a/src/features/AuthStore/hooks/useRegister.tsx b/src/features/AuthStore/hooks/useRegister.tsx index 732d83d3..8ee9dc0c 100644 --- a/src/features/AuthStore/hooks/useRegister.tsx +++ b/src/features/AuthStore/hooks/useRegister.tsx @@ -8,8 +8,8 @@ type Args = Parameters[0] export const useRegister = () => { const history = useHistory() - const goToLoginPage = () => { - history.replace(PAGES.login) + const goToRegistrationSuccess = () => { + history.replace(`${PAGES.register}/successful`) } const showError = (message: string) => { @@ -18,6 +18,6 @@ export const useRegister = () => { } return async (args: Args) => ( - register(args).then(goToLoginPage, showError) + register(args).then(goToRegistrationSuccess, showError) ) } diff --git a/src/features/Register/components/RegistrationSuccessful/index.tsx b/src/features/Register/components/RegistrationSuccessful/index.tsx new file mode 100644 index 00000000..25c73705 --- /dev/null +++ b/src/features/Register/components/RegistrationSuccessful/index.tsx @@ -0,0 +1,24 @@ +import React from 'react' + +import { PAGES } from 'config' + +import { T9n } from 'features/T9n' +import { BlockTitle } from 'features/Login/styled' + +import { + Container, + GreenTick, + ButtonLink, +} from './styled' + +export const RegistrationSuccessful = () => ( + + + + + + + + + +) diff --git a/src/features/Register/components/RegistrationSuccessful/styled.tsx b/src/features/Register/components/RegistrationSuccessful/styled.tsx new file mode 100644 index 00000000..fd70efd1 --- /dev/null +++ b/src/features/Register/components/RegistrationSuccessful/styled.tsx @@ -0,0 +1,27 @@ +import { Link } from 'react-router-dom' +import styled from 'styled-components/macro' + +import { solidButtonStyles } from 'features/Common' + +export const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin-top: 80px; +` + +export const GreenTick = styled.div` + width: 288px; + height: 288px; + margin: 60px 0 156px 0; + background-image: url(/images/greenTick.svg); + background-position-y: -98px; + background-position-x: center; +` + +export const ButtonLink = styled(Link)` + ${solidButtonStyles} + display: flex; + justify-content: center; + align-items: center; +` diff --git a/src/features/Register/index.tsx b/src/features/Register/index.tsx index a595e1a1..0995f622 100644 --- a/src/features/Register/index.tsx +++ b/src/features/Register/index.tsx @@ -9,6 +9,7 @@ import { CenterBlock } from 'features/Login/styled' import { RegistrationStep } from './components/RegistrationStep' import { CardStep } from './components/CardStep' import { SubscriptionStep } from './components/SubscriptionsStep' +import { RegistrationSuccessful } from './components/RegistrationSuccessful' export const Register = () => ( @@ -22,5 +23,8 @@ export const Register = () => ( + + + )